Question

出于某种原因，＃CCC背景（100％宽度）没有显示我的代码如下。你知道为什么吗？ TKS

.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-->

Answer 1

无需将overflow:auto添加到div#wrapper。您的.clear样式定义无法修复.wrapper高度。

将其更改为：

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

.clear:after {
    clear: both;
}

解决您的问题。

<强> DEMO

Answer 2

要获取后台，请将overflow:auto添加到#wrapper div。

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

<强> jsFiddle example

浮动的子div有自己的块格式化上下文并应用overflow：auto（或hidden）产生你寻找的结果。有关块格式化上下文的深入解答，请参阅How does the CSS Block Formatting Context work?

Answer 3

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

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

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

编辑：如果您不希望它浮动，使用overflow的其他答案也会起作用。

Answer 4

您需要为height指定.wrap100pc。

希望有所帮助！

没有在包装中显示的背景颜色

4 个答案: