Question

您可以访问我正在尝试使用的网站here。

我试图在右下角的右上方框中获得基本上的布局，但由于某种原因我不能让它向右浮动。这里有什么我想念的吗？它让我疯狂，因为我的代码在上面的框中工作，但不在下面的框中。

这是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;
}

感谢您的帮助！它可能很简单，我只需要一双新鲜的眼睛。

Answer 1

你似乎有一个错字，

的

样式规则下的

div#hours

你有

padding: 11px 11px 10px 10p;

你最后错过了'x'。这意味着未应用填充规则

现在这解决了对齐方式，但现在可能不是高度，但我确信这应该是直截了当的

div内部的div未按预期对齐

1 个答案: