1

ページの反対側でフロートが競合していることに気付きました。

私の問題を説明するために、2 つの jsFiddles があります。

フィドルA、 フィドルB

Fiddle A の例では、左側の画像が緑色のブロックの上部と同じレベルにあることがわかります。この例では、緑と青の div がコンテナー内にあります。

<div class="floatContainer" style="float: right">
    <div>Green Div</div>
    <div style="float: right; clear: right;">
        Blue Div
    </div>
</div>

このレイアウトで私が抱えている問題は、テキストが青いブロックにしっかりと折り返されていないことです。

Fiddle B の例では、コンテナーをフローティングせずに緑と青の div を個別にフローティングすることで、ラッピングを正しく行うことができました。緑色の div の下に青色の div を取得するために、もちろん「clear: right」タグが付けられています。

ただし、左側の画像が押し下げられて、青い div と同じ y 座標から始まることがわかりますが、これは私が望んでいるものではありません。

それで、左端の画像を適切に配置しながら、テキストを緑と青の div の周りに別々にうまく折り返す方法はありますか? これは CSS のバグのように思えます。私が期待した動作ではないことは確かです。

ありがとう。

4

1 に答える 1