css - div定位中的div问题

Question

您可以访问我正在处理的站点 here .

你可以看到我要做什么。我希望右下角的框在其位置上模仿右上角的框，但由于某种原因，它拒绝填充其父 div 的其余部分并选择垂直堆叠。即使没有内容，背景也会在框的一半处停止。我将它设置为向左浮动(这不是必需的，因为 div 子级应该自动采用其父级的宽度)，所以我猜那里确实有一些东西，但我不知道是什么。我试图清除等等，但也没有运气。有没有办法让右下角的 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>
            <p class="titles">Hours</p>
            <p class="subtitles">Lunch</p>
            <p class="subtitles">Dinner</p>
            <p class="subtitles">Bar</p>
        </div>
        <div>
            <p class="hours">Mon-Fri 11-4</p>
            <p class="hours">Mon-Sat 4-12</p>
            <p class="hours">Mon-Sat 4-12</p>
        </div>
    </div><!--end hours-->

还有我的 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-top: -1px;
    margin-right: -11px;
    width: 268px;
    height: auto;
    float: right;
    padding: 11px 11px 10px 10px;
    border-left: 2px solid #b9aea3;
}

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

.subtitles {
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size:  2rem;
    color: #4f4d4b;
    text-align: left;
    line-height: 2;
}

.hours {
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size:  1.7rem;
    color: #4f4d4b;
    text-align: right;
    line-height: 2;
}

感谢您的帮助或建议!

Answer 1

如果您稍微更改一下结构，它可能会对您有所帮助。与其尝试并排 float 到 div，不如将它们连接在一起，就像我在下面使用 HTML 和 css 所做的那样。我在 css 中更改内容的地方添加了注释。

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>
            <p class="titles">Hours</p>
            <p>
                <span class="subtitles">Lunch</span>
                <span class="hours">Mon-Fri 11-4</span>
            </p>

            <p>
                <span class="subtitles">Dinner</span>
                <span class="hours">Mon-Sat 4-12</span>
            </p>

            <p>
                <span class="subtitles">Bar</span>
                <span class="hours">Mon-Sat 4-12</span>
            </p>    
        </div>
    </div><!--end hours-->

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-top: -1px;
    margin-right: -11px;
    width: 268px;
    height: auto;
    float: right;
    padding: 11px 11px 10px 10px;
    border-left: 2px solid #b9aea3;
}

div#hours div {
    background: #f9f4df;
    padding: 1.9rem 4rem 2.5rem 2.5rem;
    width: auto;
    height: 150px;
   /***** Removed Display:inline-block *****/
}

.subtitles {
    float:left; /**** Added ****/
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size:  2rem;
    color: #4f4d4b;
    text-align: left;
    line-height: 2;
}

.hours {
    float:right; /**** Added ****/
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size:  1.7rem;
    color: #4f4d4b;
    text-align: right;
    line-height: 2;
}
#hours p {clear:both;} /**** Added ****/