2

2 つの画像といくつかのテキストを含むドキュメントがあります。最初の画像は左に、2 番目の画像は右に浮いています。

問題は、DIV のテキストが 2 番目の画像と重なることです。「 First DIV after second image 」というテキストは、最初の画像の下、2 番目の画像の左側に配置する必要があります (2 番目のIMGタグの後にあるため)。私は何が欠けていますか？

フィドル: http://jsfiddle.net/yLUnC/4/

スクリーンショットの例

HTML:

<div class="wrapper">
    <div>DIV before first image</div>
    <img class="floatLeft" src="http://placehold.it/200x100&text=First+image">
    <div>DIV after first, before second</div>
    <img class="floatRight" src="http://placehold.it/200x100&text=Second+image">
    <div>First DIV after second image</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text overlapping second image, not good</div>
    <div>last DIV</div>
</div>
4

1 に答える 1

3

display:inlineすべての子要素を指定し、他の特別な要素を指定する必要がありますdisplay: block。また、最も重要なことはoverflow: auto、フロートされた子要素（2番目の画像など）の高さをカウントするように親要素に与えることです。

ここに作業フィドルがあります

更新：

これらの要素にクラスを割り当てていないため、これらの特別な要素にインライン スタイルを追加しています。

更新されたフィドル（必要に応じて変更）

于 2013-08-13T13:09:30.527 に答える