0

境界線が内側の div を囲んでおらず、内側の div の境界線が外側の div の下部に達していないのはなぜですか (FF では、すべての主要なブラウザーでこれが必要です)。

誰か助けてくれませんか

<div id="main">
    <div class="insidediv">
        <p>Article 1</p>
    </div>
    <div class="insidediv">
        <p>Article 2</p>

    </div>
    <div class="insidediv">
<p>Article 3</p>
    </div>
</div>

#main{
    width: 800px;
    height: 100%;
    border: 20px solid black;
}

.insidediv{
    width: 200px;
    height: 100%;
    border-right: 20px solid black;
    float:left;
}
4

3 に答える 3

0

#main をfloat: left;またはに変更しoverflow:hiddenます。フロートがおすすめ

于 2012-10-23T10:16:40.080 に答える
0

オンに設定overflow: hidden;し#mainます。

編集：デモ

于 2012-10-23T10:15:27.090 に答える
0

フローティング要素は、ドキュメントの通常の流れからそれらを取り除きます。つまり、コンテナは、より技術的な説明が不足しているため、それらがどこで終了するかを理解できなくなります。この問題を解決するには、clear:both を適用した要素を追加して、最後の内部 div の後に float をクリアする必要があります。 http://jsfiddle.net/calder12/BcqnE/

<div id="main">
<div class="insidediv">
    <p>Article 1</p>
</div>
<div class="insidediv">
    <p>Article 2</p>

</div>
<div class="insidediv">
<p>Article 3</p>
</div><div class="clear"</div>
</div>

#main{
width: 800px;
height: 100%;
border: 20px solid black;
}

.insidediv{
width: 200px;
height: 100%;
border-right: 20px solid black;
float:left;
}
.clear{clear:both;}

上記に似ているが、最近ではより標準的なアプローチである clearfix メソッドもあります。http://j.mp/bestclearfix

于 2012-10-23T11:03:11.480 に答える