1

对，所以我有一个页面的一部分：

<div class="article">
    <div class="author">
        <img src="images/officers/john_q_public_thm.jpg" />
        <span class="name">John Q. Public</span>
        <span class="position">President</span>
    </div>
    <abbr class="postdate">
        <span class="month m-01">Jan</span>
        <span class="day d-31">31</span>
        <span class="year y-2009">2009</span>
    </abbr>
    <div class="content">
                <h2 class="title">Article Title</h2>
                <p>Pellentesque habitant morbi...facilisis luctus, metus</p>
                <p>Pellentesque habitant morbi...facilisis luctus, metus</p>
    </div>
</div>
<div class="article">...</div>
<div class="article">...</div>

和authordivabbr向左浮动。这些articlediv 中的每一个都需要与其兄弟姐妹分开 5px 左右。但是，authordiv 超出了 div 的技术“高度”。什么都不做，margin-bottom因为空间被浮动占用了author。

这有点难以想象，所以我把它放在了 server上。

有什么方法可以强制父级至少与其中的所有浮动元素一样高？

如果有人知道我在说什么，谢谢。

4

3 回答 3

2

除了上述技巧之外，您还可以overflow:auto;在articlediv 上进行设置，尽管这可能会产生副作用，具体取决于您对这些 div 有哪些其他规则。但它可以防止您必须向 HTML 添加元素。

于 2010-04-06T22:54:56.980 回答
1

您可以将其放在 div.article 的底部/内部（在关闭 div 之前）

<div style="clear:both;"></div>

或者这样做：

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
于 2010-04-06T22:44:07.477 回答
0

您需要在浮动元素之后添加一个清除元素。像这样的东西通常<br clear="both"/>可以清除左右浮动并“填充”您的包含元素。

您可以指定both,left并right相应地清除所有浮动元素，左浮动和右浮动。

于 2010-04-06T22:38:24.673 回答