不正確的CSS呈現？

Question

所以我爲我的網站創建了一個佈局。我無法顯示我的網站條目/帖子。這裏是我的源代碼：

<div id="post-101" class="post-101 post type-post status-publish format-standard hentry category-Information category-Update"> 

    <h2 class="entry-title"> 
     <a href="http://localhost/bleachin/?p=101">TITLE</a> 
    </h2> 

    <div class="entry-content"> 
     CONTENT 
    </div><!-- .entry-content --> 

    <div class="entry-meta"> 
      META 
      </div><!-- .entry-meta --> 
    </div><!-- #post-101 --> 


<div id="post-100" class="post-100 post type-post status-publish format-standard hentry category-Information"> 

    <h2 class="entry-title"> 
     <a href="http://localhost/bleachin/?p=100">TITLE 2</a> 
    </h2> 

    <div class="entry-content"> 
     CONTENT 
    </div><!-- .entry-content --> 

    <div class="entry-meta"> 
     META 
    </div><!-- .entry-meta --> 
    </div><!-- #post-100 --> 

理論上這應該是正確的。但是當我試圖在.post上添加邊框時，一切都變得怪異。下面是它的外觀與.post { border-bottom:10px; }

http://i.imgur.com/Nv5j8.png

我與Chrome和Firefox進行了測試（如我的大多數成員正在使用這些）。兩者都導致相同的奇怪的外觀。

對此有何幫助？

Answer 1

將overflow: auto;添加到.post的分類中。

我敢打賭，這篇文章包含溢出它的父div的浮動元素（在你的案例.post）。將overflow:auto;添加到您的.post div中，並通過清除浮動塊來包含浮動元素。

CSS

.post { 
    border-bottom:10px; 
    overflow: auto; 
}