0

CSS を使用してこの問題を解決する方法はありますか、それとも改行を追加して記事ごとに修正する必要がありますか? 私は記事の構造を持っています：

<div>
    <img style="float: left" src="image_src.jpg">
    <h3>Heading #1</h3>
    <p>Paragraph 1....</p>
    <h3>Heading #2</h3>
    <p>Paragraph 2....</p>
</div>

さて、問題は、見出しが画像を「キャッチ」し、その下に段落が表示されている間にインデントしなければならないことが非常に多いことです。次に例を示します。

ここに画像の説明を入力

段落に続いて見出しを画像の下に強制的に移動させる方法はありますか、またはそのような問題が発生したときはいつでも手動で改行を追加する必要がありますか?

4

1 に答える 1

0

確かに、CSS セレクターを使用してnth-of-type、最初の h3 要素以外のすべてのフロートをクリアできます。

h3:nth-of-type(n+2){
    clear:left;
}

jsFiddle の例

于 2013-02-10T03:25:48.517 に答える