0

我正在从头开始设计一个 wordpress 主题。我用盒子来发帖——每行两个帖子。CSS代码是：

#box  {
margin-bottom:10px;
margin-left:0;
margin-right:10px;
width:240px;
}
.left {
float:left;
margin-left:10px;
}

并且有包装器来包装页面中的所有盒子：

#wrapper{
     width:980px;
     background-color:#fff;

}

<div id="wrapper">
<div id="box" class="left">
...WP tags and...
</div>
</div>

所以所有的盒子都在包装里。现在的问题是包装器没有出现 - 页面上没有白色背景，但是一旦我删除浮动属性包装器就会发挥作用。我该如何解决这个问题！？

4

3 回答 3

1

盒子“漂浮”在包装纸的顶部。只需添加 clear:both; 到#wrapper。哦，顺便说一句，你不需要为你的边距创建 3 个元素，你可以把它写在一行上，比如 margin:0 10px 10px 0; (top, right, bottom, left) 也是调试css时应该使用的一个小技巧，添加border:solid 1px red; 所以你可以看到你在做什么。

于 2011-04-13T19:13:17.147 回答
1

给出包装元素overflow: hidden。

#wrapper{
    overflow: hidden;
    width:980px;
    background-color:#fff;
}

这是在所有浏览器上进行这项工作的公认方法。与 clearfix 解决方法相比，它工作得更好，更省事。

于 2011-04-13T21:25:47.237 回答
0

您将需要一个 clearfix http://www.webtoolkit.info/css-clearfix.html

于 2011-04-13T18:18:08.970 回答