0

考虑以下 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:

4

4 回答 4

2

我会尝试

.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>
于 2012-07-28T15:41:46.953 回答
1

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

于 2012-07-28T15:38:29.487 回答
1

我不确定您的代码中可能还有什么，但只需在这个 fiddle上的 FF、Chrome 和 IE7+ 中添加overflow: auto（或）对我有用。我知道你说你尝试了第一个。hidden

于 2012-07-28T15:43:45.537 回答
1

它似乎能够对其进行调整以按以下方式工作：

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

于 2012-07-28T15:45:07.147 回答