0

我有一个#maindiv，其中包含两个 div（#left 和 #right）。我有另一个 div#below_main在#main.

问题：当没有为 设置高度时，#main那些内容会弄乱#below_main. 我不想有静态高度，#main因为这更像是内容发布高度会根据内容量动态变化。

所以我尝试min-height了#main但不起作用我也尝试position过relative也#main不起作用。

现在如何将其设置为无论#main #left内容是什么，但#main_below应该在内容（#main）div之后开始。

我相信浮动在左边有什么不同。如果是这样，请解释一下。有什么帮助吗？

代码

HTML

<div id="main">
    <div id="left">
     <!-- Dynamic contents -->        
    </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>

CSS

#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;
}

JSFIDDLE

发布此问题后的编辑

谢谢大家，clear:both有帮助，但背景颜色没有填满内容。你知道吗？我相信这是由于没有指定高度。没有高度怎么办？ 检查这个小提琴

4

2 回答 2

2

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

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

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

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

于 2013-10-09T12:56:39.450 回答
1

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

在此处查看更新的小提琴。

我个人使用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;
}
于 2013-10-09T13:28:22.747 回答