Question

由于某种原因，我不能让我的班级蓝背工作（背景仍然是绝望的白色），你知道为什么吗？谢谢 http://jsfiddle.net/wWLz4/

<div class="wrap980px blueback clear">
<div id="block-left">
<h2>dfd</h2>
</div> <!-- End DIV block-left -->

<div id="block-right">
jhjh
</div> <!-- End DIV bloack-right --> 
</div>  <!-- End DIV 980pxWrap -->

CSS

.wrap980px {
    margin: auto;
    width: 980px;
}

.blueback {
    background: #006DB8;
}

#block-left {
    float: left;
    padding: 10px;
    width: 470px;
}
#block-right {
    float: right;
    padding: 10px;
    width: 470px;
}
.clear:after {
    clear: both;
}

Answer 1

或者，或者，添加：

.wrap980px {
    overflow: hidden;
    ...

容器<div>中有两个浮动元素，因此它的有效高度为零。您可以添加固定高度，如已建议的那样，或使用oveflow: hidden;技巧。

Answer 2

试试这个

.wrap980px {
    margin: auto;
    width: 980px;
    overflow:auto;
}

或者

.wrap980px {
        margin: auto;
        width: 980px;
        float:left;
    }

Answer 3

定义wrap980px的高度。现在是0。例如：

.wrap980px {
    margin: auto;
    width: 980px;
    height: 150px;

}

http://jsfiddle.net/wWLz4/1/

Answer 4

使用：

<div class="wrap980px blueback">
<div id="block-left">
<h2>dfd</h2>
</div> <!-- End DIV block-left -->

<div id="block-right clear">
jhjh
</div> <!-- End DIV bloack-right --> 
</div>

或者替代使用：

.wrap980px{ overflow:hidden}

背景颜色不在包装工作

4 个答案: