Question

考虑以下html结构：

<div class="entry">
    <h1>Title</h1>
    <p>...</p>
    <p>...</p>
    <div class="tagged">...</div>
    <div class="comments">...</div>
</div>

css是：

.taggged { float: left; width: 50%; }
.comments { float: right; width: 50%; text-align: right; }
.entry { margin-bottom: 30px; }

问题是边距（或填充，如果适用）不会呈现在.entry元素的底部。我在overflow: auto上尝试了.entry以及clear:

的各种排列

Answer 1

我试试

.entry { overflow:hidden; margin-bottom:30px; }

另一件在我的经验中效果更好的方法是在源顺序中首先使用正确的浮动元素，如下所示：

<div class="entry">
    <h1>Title</h1>
    <p>...</p>
    <p>...</p>
    <div class="comments">...</div>
    <div class="tagged">...</div>
</div>

Answer 2

在你的评论之后添加一个元素（div或span）并明确说明：两者;你的风格。

Answer 3

我不确定您的代码中还有哪些内容，但只需添加overflow: auto（或hidden）即可在this fiddle的FF，Chrome和IE7 +中使用。我知道你说你试过第一次。

Answer 4

似乎能够通过以下方式调整它：

CSS：

 body { overflow: hidden; }
.taggged { float: left; width: 50%; }
.comments { float: right; width: 50%; text-align: right; margin-bottom: 30px; }
.entry { overflow: auto; width: 100%; }

将边距移到底部div上，并将输入更改为width: 100%; overflow: auto;。我测试了它，它适用于Firefox和Opera。

http://www.quirksmode.org/css/clearing.html

将填充或边距应用于浮动内容的容器

4 个答案: