1

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

这是网址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>

现在我只想要一个帮助我只是想知道为什么边框底部属性不完全符合我想要的位置？它出现在中间的某个地方。

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

谢谢

4

4 回答 4

1

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

于 2013-02-27T05:23:05.803 回答
1

您已经漂浮了子 Div 而没有清除它们。

有几个选项可以修复它：

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; }
于 2013-02-27T05:23:42.947 回答
1

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

于 2013-02-27T05:25:40.193 回答
1

您正在使用 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元素中，如http://jsfiddle.net/KpFj2/2/

于 2013-02-27T05:35:16.230 回答