Question

我只是在我的一个小项目中工作。

以下是网址http://jsfiddle.net/KpFj2/1/embedded/result/

               <article>
                <div class="entry-meta">
                    <div class="comment"><i class="icon-calendar"></i>25 Feb 2013</div>
                    <div class="calender"><i class="icon-comment"></i>22 Comments</div>
                </div>
                <div class="post-content">
                    <h1>A New Beginning, A New Story</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. </p>
                </div>
           </article>

现在我只想要一个帮助，我只是想知道为什么边界底部属性不能完全按照我想要的那样去？它出现在中间的某个地方。

你能指导我解决这个错误吗？

由于

Answer 1

你需要一些方法来清除浮子。将overflow:hidden添加到#content article

Answer 2

你没有清除孩子们已经漂浮了孩子们。

有几个选项可以解决它：

HTML

<article>
     <div class="entry-meta"></div>
     <div class="post-content"></div>
</article>

CSS

article { overflow: hidden; }

或

HTML

<article>
     <div class="entry-meta"></div>
     <div class="post-content"></div>
     <br class="clear" />
</article>

CSS

.clear { clear:both; }

Answer 3

为position: absolute;设置#content article或使用overflow:hidden;并查看。

Answer 4

您正在使用HTML5 Boilerplate，其中已存在.clearfix辅助类来解决@Wex和@JesseLee描述的问题。

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

N. Gallagher的这篇文章对此进行了描述：http://nicolasgallagher.com/micro-clearfix-hack/

您只需将此课程添加到article

中的{{1}}元素即可

Border Bottom属性不会出现在该位置

4 个答案: