0

我试图在灰色背景（主体）上获得一个固定宽度的白色 <div> ，但一切都显示为灰色；白色被忽略。代码在jsbin上。有任何想法吗？我在以前的网站上这样做过，一切都很顺利。我看不出我在这里所做的有什么不同。


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

4

4 回答 4

2

您的容器和侧边栏处于浮动状态，但它们并未“清除”。你所做的是添加一个 div

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

在你的侧边栏 div 之后。

然后在你的CSS中：

.clearBoth {
   clear:both;
}
于 2013-01-31T17:57:25.657 回答
1

花车毁了它。 这是由浮动引起的:-)

基本上#container没有维度，因为里面的所有东西都是浮动的。没有尺寸=没有背景出现

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

于 2013-01-31T17:56:32.193 回答
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; }

试试这些改变

于 2013-01-31T17:51:06.023 回答
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">
于 2013-01-31T17:56:12.617 回答