CSS background-color无效

时间:2013-01-31 17:43:17

标签: css background-color

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


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

4 个答案:

答案 0 :(得分:2)

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

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

在你的侧栏div之后。

然后在你的css中:

.clearBoth {
   clear:both;
}

答案 1 :(得分:1)

浮游物正在破坏它。 它是由浮子引起的: - )

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

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

答案 2 :(得分:0)

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

尝试这些更改

答案 3 :(得分:0)

您的问题是,根据规范,包含的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">