float:left セットとテキスト コンテンツを持つ画像を含むボックスがあります。
-------------------------------------
|--------- |
|| | |
|| Image | |
|| | Content |
|--------- |
| |
| |
| |
--------------------------------------
Fig. 1
私は通常、画像の周りにコンテンツを浮かせるのが良いと考えています。ただし、リストを使用する場合、次のような表示は面倒です。
-------------------------------------
|--------- |
|| | List |
|| Image | |
|| | 1. Item |
|--------- 2. Item |
| 3. Item |
| 4. Item |
| |
--------------------------------------
Fig. 2
私はむしろ次のようにしたいと思います（少なくともかなり短いリストの場合、リストが今のところ短いと仮定しましょう）
-------------------------------------
|--------- |
|| | List |
|| Image | |
|| | 1. Item |
|--------- 2. Item |
| 3. Item |
| 4. Item |
| |
| Additional content (not in list) |
--------------------------------------
Fig. 3
リストを作成して上記の外観を得ましたdisplay: inline-block(リストの前に a を挿入するか<br>、ブロック レベルの要素でラップします)。
ただし、長いリスト アイテム (コンテンツ フィールドの小さな幅よりも長い) の場合、フロートはクリアされます。
-------------------------------------
|--------- |
|| | |
|| Image | |
|| | |
|--------- |
| 1. Item |
| 2. A very long item, which makes |
| the list box just as wide as the|
| outer box. |
| 3. More items |
-------------------------------------|
Fig. 4
なぜこれが起こるのかは明らかです。フローティング環境では、最初にリストがブロックとしてレンダリングされます (理由によりdisplay: inline-block)。外側のボックスの幅を環境幅として使用します。長いアイテムがあるため、結果のブロックは外箱と同じ幅になります。2 番目のステップでは、ブロックが浮動画像の横に収まるように試行されますが、収まりません。最後にフロートをクリアします。
状況を修正する方法はありますか？同様に、最初に短い幅でリストをレンダリングしてみて、それが失敗した場合は再レンダリングしますか? または、私が望むものを達成するためのまったく異なる方法ですか?