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

CSS渲染不正确？

1 个答案: