Question

我有这个网站（非常恢复）：

<body>
   <div id="container">
      <!-- all html in here -->
   </div>
</body>

问题是我需要页面居中（所以我不能使用浮动），

身体有background:#ddd，容器有background:#fff，

问题是白色背景不可见，除非我在px中设置min-height或height到容器（或者如果我设置float，但不兼容），

#container标记是：

#contenedor{
    display: block;
    background:  white;
    width: 1024px;
    padding: 44px 2px 2px;
    position: relative; /* is relative so the margin auto works */
    margin: auto;

}

测试在这里：http://jsfiddle.net/bfzWN/

Answer 1

一个简单的解决方案是将overflow:auto添加到您的容器（#contenedor）：

#contenedor{
    display: block;
    background:  white;
    width: 1024px;
    padding: 44px 2px 2px;
    position: relative; /* is relative so the margin auto works */
    margin: auto;
    overflow: auto; /* ADD THIS LINE */
}

实例：http://jsfiddle.net/bfzWN/1/

Answer 2

你有很多浮动没有被清除。我会添加一个伪元素，在你的竞争者之后清除：

#contenedor:after {
    content:"\0020";
    display:block;
    height:0px;
    overflow:hidden;
    clear:both;
}

就个人而言，我喜欢这个比溢出＆＃34;更好。技巧@ tw16已经回答了，因为如果你想要在竞争者之外定位某些东西，你仍然可以。

Answer 3

将正文的宽度设置为1024并将其居中，这将允许您浮动div。

<body style="width: 1024px; margin: 0px auto; text-align: center;">

#contenedor {
 display: block;
 background:  white;
 width: 1024px;
 padding: 44px 2px 2px;
 position: relative; /* is relative so the margin auto works */
 margin: auto;
 float: left;

}

页面容器没有高度

3 个答案: