0

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

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

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

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

问题是白色背景不可见，除非我以 px 为容器设置 min-height 或 height （或者如果我设置了浮动，但不兼容），

#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/

4

3 回答 3

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/

于 2012-04-27T00:11:07.263 回答
1

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

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

就个人而言，我比 @tw16 回答的“溢出”技巧更喜欢这个，因为如果你想在竞争者之外定位一些东西，你仍然可以。

于 2012-04-27T00:15:13.750 回答
0

将 body 的宽度设置为 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;

}

于 2012-04-27T00:09:34.297 回答