Question

我正在尝试获得固定宽度的白色＆lt; div＆gt;在灰色的背景（身体），但一切都显示为灰色;白色被忽略了。代码在jsbin。有任何想法吗？我在以前的网站上做过这个，而且一切都很好。我看不出我在这里做的事情有什么不同。

PS：我必须将jsbin URL写下来，并在此处手动输入，因为Firefox拒绝将其从共享弹出窗口复制到剪贴板。这在以前也有用： - （

Answer 1

你的容器和侧边栏是浮动的，但它们没有“清除”。你做的是添加一个div

<div class="clearBoth"></div>

在你的侧栏div之后。

然后在你的css中：

.clearBoth {
   clear:both;
}

Answer 2

~~浮游物正在破坏它。~~ 它是由浮子引起的： - ）

基本上#container没有维度，因为其中的所有内容都是浮动的。没有维度=没有背景出现

将overflow: auto添加到#container是解决问题的一种方法（取决于您希望整个布局如何显示）。

Answer 3

 body {
background-color: #CCCCCC;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
text-align: center;}

#container {
background-color: #FFFFFF;
display: inline-block;
margin: 0 auto;
text-align: left;
width: 400px; }

尝试这些更改

Answer 4

您的问题是，根据规范，包含的DIV将从文档流中取出。因此，兼容浏览器会将容器div视为空。

将以下代码放在样式表的底部：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

然后像这样对容器进行更改：

<div id="container" class="clearfix">

CSS background-color无效

4 个答案: