浮動元素不包括在父，引起下邊距問題

對，所以我有一個網頁的部分：浮動元素不包括在父，引起下邊距問題

<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>

的author和abbr的div是向左浮動。這些article div中的每一個都需要與它的兄弟姐妹分開5px左右。但是，author div正在超出div的技術「高度」。 margin-bottom沒有做任何事情，因爲空間被浮動的author佔用。

這有點難以設想，所以我把它放在a server上。

有沒有辦法強制父母至少與所有浮動元素一樣高？

如果有人知道我在說什麼，謝謝。

來源

2010-04-06 Christian Mann

可以/對div.article內（關閉DIV前右）

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

把這個底部還是這樣做：

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

來源

2010-04-06 22:44:07 vinhboy

站點鏈接是最有意義的方式，imo。如果我不需要，我*討厭*向DOM添加元素。 – 2010-04-06 22:59:15

您需要在浮動元素之後添加清除元素。像這樣的東西通常工作<br clear="both"/>這將清除左側和右側的浮游物，並「填充」你的包含元素。

您可以指定both，left和right，其中清除所有浮動元素，相應地浮動和右浮動。

來源

2010-04-06 22:38:24 Chris

除了上述黑客，您可以在article div上設置overflow:auto;，雖然這可能會有副作用，具體取決於您對這些div有哪些其他規則。但它可以防止你不得不向HTML添加元素。

來源

2010-04-06 22:54:56 tloflin

你是對的，但是vinhboy首先得到了正確的答案。（站點鏈接） – 2010-04-06 22:58:42

啊，所以他做到了。不用擔心，我會留下此指示，而不必複製/粘貼網址並搜索文章。 – tloflin 2010-04-06 23:08:12

浮動元素不包括在父，引起下邊距問題

回答

相關問題