设计wordpress主题问题

发布于 2024-10-31 22:33:51 字数 536 浏览 5 评论 0原文

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

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

并且有包装器来包装 page:

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

}

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

中的所有框，因此所有框都在包装器中。现在的问题是包装器没有显示 - 页面上没有白色背景，但是一旦我删除浮动属性包装器就开始发挥作用。我该如何解决这个问题！？

原文

I'm designing a wordpress theme from scratch.
I used boxes for posts - two posts per row.
The CSS code is:

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

and there's wrapper to wrap all boxes in page:

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

}

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

so all boxes are in the wrapper. Now the problem is wrapper doesn't show up - no white background on the page, but as soon as i remove float property wrapper come into the play.
How can I fix that!?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

内心荒芜 2024-11-07 22:33:51

给包装元素overflow:hidden。

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

这是在所有浏览器上都可以使用的公认的方法。与clearfix解决方法相比，它效果更好，麻烦更少。

Give the wrapper element overflow: hidden.

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

It is the accepted method of making this work across all browsers. It works better and with less hassle than the clearfix workaround.

回复收藏 0 原文

少女情怀诗 2024-11-07 22:33:51

盒子“漂浮”在包装纸的顶部。只需添加clear:both;到#wrapper。
哦，顺便说一句，你不需要为你的边距创建 3 个元素，你可以把它写在一行上，就像这样 margin:0 10px 10px 0; （上、右、下、左）
还有一个在调试 css 时应该使用的小技巧，添加 border:solid 1px red;这样你就可以看到你在做什么。

回复收藏 0 原文