div定位中的div故障

Question

你可以访问我在这里上工作的网站。

你可以看到我想要什么。我希望右下角框在其位置上模仿右上角框，但出于某种原因，它拒绝填充其父分区，并选择垂直堆叠。即使没有内容，背景也会在盒子的一半处停止。我把它设置为向左浮动(一些不应该是必需的东西，因为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

如果你稍微改变一下你的结构，它可能会对你有帮助。与其试图并行地浮动到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 ****/

Answer 2

您所需要做的就是减少适合您的#时数div的内部div大小，并为每个内部div分配一个类，并使它们左右浮动。

示例

<div id="hours">
    <div class="left">
        <p class="titles">Hours</p>
        <p class="subtitles">Lunch</p>
        <p class="subtitles">Dinner</p>
        <p class="subtitles">Bar</p>
    </div>
    <div class="right">
        <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：

#hours .left
{
    float: left;
}

#hours .right
{
    float: right;
}

肯定会有帮助的。也开始使用浏览器的控制台。它们会让你的生活更安逸。

Answer 3

我想你是想让时间占据整个箱子吧？

如果是这样的话，将以下代码添加到其中：

height: 100%;
width: 100%;
padding: 0px;