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

如果您稍微更改一下结构，它可能对您有所帮助。你可以将它们加入到一起，就像我在下面的HTML和css中所做的那样，而不是试图并排浮动到div。我添加了评论，我在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

您需要做的就是减少适合您的#hours 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>

CSS：

#hours .left { float: left; } #hours .right { float: right; }

这肯定会有所帮助。也开始使用浏览器的控制台。它们可以缓解你的生活。

Answer 3

我认为你试图让小时数占据整个盒子？

如果有，请将此代码添加到其中：

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

Answer 4

使用followig。这里评论的那些，需要从代码中删除。

div.container {
    /*height: 460px;*/
    /*padding: 10px*/
    padding: 10px 10px 0px; /* bottom padding 0px */
}
div#hours div {
    /*inline-block*/
}

现在在结束#hours标记后添加以下内容。

<div style="clear:both;"></div>

要使#hours div看起来不错，请使用以下内容。

<div id="hours">
    <h3 class="titles">Hours</h3>
    <dl>
        <dt>Lunch</dt>
        <dd>Mon-Fri 11-4</dd>
        <dt>Dinner</dt>
        <dd>Mon-Sat 4-12</dd>
        <dt>Bar</dt>
        <dd>Mon-Sat 4-12</dd>
    </dl>
</div><!--end hours-->

CSS样式 -

#hours dl,
#hours dt,
#hours dd {
    margin: 0;
    padding: 0;
}
#hours dl {
    width: 100%;
    float: left;
    clear: both;
}
#hours dl dt {
    float: left;
    clear: left;
    width: 45%;
}
#hours dl dd {
    float: left;
}

div中div的问题

4 个答案: