0

出于某种原因，#CCC 背景（100% 宽度）没有显示在我下面的代码中。你知道为什么吗？Tks

http://jsfiddle.net/DzaCq/5/

.wrap100pc {
    width: 100%;
    margin: auto;
    background: #ccc;
}

#bottom-left {
    float: left;
    width: 490px;;
    background: #5421c2;
    height: 300px;
}

#bottom-right {
    float: right;
    width: 490px;;
    background: #2ec4a6;
    height: 300px;
}

.clear:after {
    clear: both;

}


<div class="wrap100pc clear">
<div id="bottom-left">bottom-left</div>
<div id="bottom-right">bottom-right</div>
</div>  <!-- End DIV Wrap100pc Clear-->
4

4 回答 4

3

无需添加overflow:auto到div#wrapper. 您的.clear样式定义不固定.wrapper高度。

将其更改为：

.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

解决你的问题。

演示

于 2013-09-05T19:30:23.197 回答
2

要恢复背景，请添加overflow:auto到您的#wrapperdiv。

.wrap100pc {
    width: 100%;
    margin: auto;
    background: #ccc;
    overflow:auto;
}

jsFiddle 示例

浮动的子 div 有自己的块格式化上下文，并且应用溢出：自动（或隐藏）会产生您寻求的结果。有关块格式化上下文的深入解答，请参阅CSS 块格式化上下文如何工作？

于 2013-09-05T19:27:10.877 回答
2

您也只需要添加float:left到包装器中：

http://jsfiddle.net/DzaCq/3/

.wrap100pc {
    width: 100%;
    margin: auto;
    background: #ccc;
    float:left;
}

编辑：如果您不希望它浮动，则使用的另一个答案overflow也可以。

于 2013-09-05T19:28:19.297 回答
1

您需要height为.wrap100pc.

希望有帮助！

于 2013-09-05T19:31:12.310 回答