div內div未按預期對齊

您可以訪問我正在嘗試使用的網站here。div內div未按預期對齊

我想基本上得到右下框右上角的佈局，但由於某種原因，我無法讓它漂浮在右邊。有什麼我在這裏失蹤？這使我瘋狂，因爲我的代碼在上面的框中工作，但不在下面的框中。

這裏是HTML。

<div id="menu-ad"> 
     <div> 
      <p class="titles">Our Fare</p> 
      <p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p> 
      <a href="#" id="button">VIEW MENU</a> 
     </div> 
    </div><!--end menu ad--> 

    <div id="hours"> 
     <div> 
     </div> 
    </div><!--end hours--> 
</div><!--end container-->

和CSS。

/*menu ad*/ 

div#menu-ad { 
    position: relative; 
    margin-right: -11px; 
    margin-top: -11px; 
    width: 268px; 
    height: auto; 
    float: right; 
    padding: 11px 11px 10px 10px; 
    border-left: 2px solid #b9aea3; 
    border-bottom: 2px solid #b9aea3; 
    overflow: hidden; 
} 

div#menu-ad div { 
    background: #f9f4df; 
    padding: 1.9rem 4rem 2.5rem 2.5rem; 
    height: 200px; 
    display: inline-block; 
} 

.titles { 
    font-family: "Montserrat", "Helvetica", sans-serif; 
    font-size: 2.5rem; 
    color: #d6832e; 
} 

#ad { 
    font-family: "Montserrat", "Helvetica", sans-serif; 
    font-size: 1.6rem; 
    line-height: 1.35; 
    color: #4f4d4b; 
    margin-top: .5rem; 
    width: auto; 
} 

a#button { 
    padding: .6rem 1.3rem .6rem 1.3rem; 
    font-family: "Montserrat", "Helvetica", sans-serif; 
    font-size: 1.8rem; 
    color: #fff; 
    background: #d6832e; 
    text-align: center; 
    vertical-align: middle; 
    text-decoration: none; 
    position: absolute; 
    float: left; 
    bottom: 3.5rem; 
} 

/*hours*/ 

div#hours { 
    position: relative; 
    margin-right: -11px; 
    margin-top: 11px; 
    width: 268px; 
    height: auto; 
    float: right; 
    padding: 11px 11px 10px 10p; 
    border-left: 2px solid #b9aea3; 
} 

div#hours div { 
    background: #f9f4df; 
    padding: 1.9rem 4rem 2.5rem 2.5rem; 
    height: 150px; 
    display: inline-block; 
}

感謝您的幫助！這可能很簡單，我只需要一雙新鮮的眼睛。

來源

2014-03-04 tfhall4

你似乎有一個錯字，

下的樣式規則

div#hours

你有

padding: 11px 11px 10px 10p;

你在最後缺少一個 'x'。這意味着填充規則不被應用

現在這解決了校準，但高度可能不是現在，但我敢肯定這應該是直截了當

來源

2014-03-04 02:07:26 OJay

打我吧:) +1 – David

我知道這可能是這樣的。謝謝。而且，這是我更新的CSS'div＃hours { \t position：relative; \t margin-right：-11px; \t width：268px; \t身高：自動; \t float：right; \t padding：11px 11px 10px 10px; \t border-left：2px solid＃b9aea3; '但它仍然沒有正確地跟隨我的寬度。 – tfhall4

你只需要在內部div中添加一些內容。 – ElliotSchmelliot

div內div未按預期對齊

回答

相關問題