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未按预期对齐

回答

相关问题