Question

我有一个#main div，其中包含两个div（＃left和#right）。我有另一个div #below_main，它位于#main之后。

问题：如果没有为#main设置高度，则这些内容会使#below_main混乱。我不希望#main具有静态高度，因为这更像内容发布高度将根据内容量动态变化。

所以我为min-height尝试了#main但是没有效果我也尝试position relative #main #main #left这也无效。< / p>

现在如何将此设置为#main_below内容，但<div id="main"> <div id="left">  </div> <div id="right"> </div> </div> <div id="below_main"> <ul class="st"> <li>list1</li> <li>list2</li> <li>list3</li> <li>list4</li> </ul> <ul class="st"> <li>list1</li> <li>list2</li> <li>list3</li> <li>list4</li> </ul> <ul class="st"> <li>list1</li> <li>list2</li> <li>list3</li> <li>list4</li> </ul> <ul class="st"> <li>list1</li> <li>list2</li> <li>list3</li> <li>list4</li> </ul> </div>应在内容（#main）div之后开始。

我相信漂浮在留下什么造成差异。如果那样请解释我。有什么帮助吗？

CODE

HTML

#main {
        background: #ffffff;
        width:980px;

        margin-top:20px;
}
#main #left {
    width:610px;
    float: left;
    padding:0 0 0 40px;
}

#main #right {
    width:280px;
    float:right;
    padding:0 25px 0 0;
}
#below_main {
    height:225px;
    width:980px;
    border:1px solid #dddddd;
    margin-top:20px;
    border-radius: 10px;
    background:rgb(0,100,0);
}
#below_main ul.st {
    list-style: none;
    margin: 50px 0 0 0;
    padding: 0 0 0 55px;
    float:left;
    width:140px;
    font-size: 11px;
}

CSS

clear:both

JSFIDDLE

发布此问题后的编辑

谢谢大家，{{1}}有所帮助，但背景颜色没有填满内容。你有什么想法吗？我相信这是由于没有指定高度如何没有高度吗？ Check This fiddle

Answer 1

将clear: both;样式添加到below_main。

编辑：要使用指定的背景颜色填充#main div，通过不为#main元素本身设置显式高度，可以将bgcolor应用于#left和#right div。

#main > div { background-color: mycolor; }

编辑2：@sun设法找到一个更好的解决方案，我将在这里包括：使用样式<div class="clear"></div>在#main结束之前添加“.clear{ clear:both}。这有助于背景颜色问题和内容。

Answer 2

要解决您的更新，您只需在主div上使用clearfix。

See the updated fiddle here.

我个人使用的是Nicholas Gallagher这个

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

如果未指定高度，如何将div保持在另一个div之下？

2 个答案: