3

私は次のHTMLを持っています:

<div class="selfClear" style="float: left; border: 1px solid black;">
      ...floated stuff in here...
</div>
<span style="margin-top: 10px; border: 1px solid purple;">hello world</span>

margin-top ごとに、div と span の間に 10px のギャップが必要です。ただし、上記の div はフローティングであるため、そのようにはレンダリングされません。何かを明確にするための修正は、DIV です。純粋な CSS を介してこれを行うには、'::after' メソッドを使用してコンテンツを挿入し、その後クリアに設定する必要があるようです。

.selfClear::after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}   
.selfClear {
    display: inline-block;
}

しかし、これは私がやるべきだと思っていることを完全には行っていません。ピリオドが挿入されたときに実際に表示できるように、高さ/可視性のスタイルを含めない場合、div の後ではなく、実際には div の内側にレンダリングされていることがわかります (黒い境界線がそれを囲みます)。 div と span)。これがどのように機能するかを誤解していますか？

編集：

より簡単な例を次に示します。

CSS:

#theDiv {
border: 1px solid green;
}

#theDiv::after {
content: ".";
}   

#theOtherDiv {
border: 1px solid orange;
}

HTML:

<div id="theDiv">
    Hello
</div>
<div id="theOtherDiv">
   World
</div>

これにより、div の後ではなく、'Hello' の後にピリオドが配置されます。

要素自体ではなく、要素の CONTENTS に実際に追加されているよう::afterです。::beforeあれは正しいですか？

4

3 に答える 3

3

はい、選択した要素のコンテンツに追加されます。div をラップしてから、ラッパー div の後に追加することもできますが、そもそも :after を使用する目的全体が無効になります。

于 2009-10-09T16:26:39.997 に答える
3

囲んでいる div を「overflow: auto」に設定することもできます。それはどこでも機能します。

于 2009-10-09T17:54:35.170 に答える
2

clearfix を使用することをお勧めします。これははるかに簡単です。clearfix のクラスでサロンディングをセットアップするだけです。

この例を参照してください。

于 2009-10-09T16:26:39.043 に答える