html - Border Bottom プロパティがその場所に表示されない

Question

私は自分の小さなプロジェクトに取り組んでいます。

ここにURLがあります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>

今、私はただ1つの助けが欲しいのですが、境界の下部のプロパティが私が望んでいた場所に正確に移動しない理由を知りたかったのですか? ど真ん中に登場です。

このエラーを解決する方法を教えてください。

ありがとう

Answer 1

@Wexと@JesseLeeによって記述された問題を解決するために、.clearfixヘルパークラスがすでに存在するHTML5Boilerplateを使用しています。

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

http://jsfiddle.net/KpFj2/2/のように、このクラスをarticle要素に追加する必要があります。

Answer 2

フロートをクリアする方法が必要です。overflow:hiddenに追加#content article

Answer 3

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

Answer 4

OR 用position: absolute;に設定 して参照してください。#content articleoverflow:hidden;