2

私は次のhtml構造を持っています：

<div id="container">
    <div id="block1">
        <img src="someimage/path" />
    </div>
    <div id="block2">
        Some Text
    </div>
    <div id="block3">
        Some Text
    </div>
</div>

コンテナはfloat:leftです。コンテナは最も広いdivまで拡張されますが、block1の後に続くだけで、block1の画像の大きさに応じてblock2とblock3のテキストを折り返す場合はどうなりますか。今の私のマークアップでは、テキストが長い場合、テキストが消えるまでコンテナdivを押し出しますが、テキストは画像のキャプションのように、画像と同じ幅にする必要があります。何か案は？

4

1 に答える 1

1

コンテンツに合わせて自動的に伸縮するようにコンテナdisplay:inline-block;を作成します。overflow:auto;ブロック #2 とブロック #3overflow:auto;も与えて、内容に合わせて引き伸ばすようにします。

残念ながら、幅を画像の幅にするには、JavaScript を使用する必要があります。以下の例を参照してください。ここでは、jQuery で修正しています。

参照: http://jsfiddle.net/TFLMX/2

于 2012-06-26T20:55:06.173 に答える