html - float をラップするときにテキストがぶら下がるのを避ける

Question

画像はそれを最もよく言います：

これは単なるfloat: left画像です ( http://jsbin.com/itihes/1 )。純粋な CSS の動的テキストでこの問題を防ぐ方法はありますか? テキストを折り返す必要がありますが、1 行未満 (理想的には 2 行) の場合、すべてのテキストが右側の同じブロックに残ります。

画像の幅は固定ですが、ブロック全体の幅は動的です。

Answer 1

DSKrepps はポイントを得ました: あなたができる最も近いことは、それぞれの段落ごとに段落です。

その段落の残りのテキストは折り返されませんが、次の段落は全幅になります。

あなたがすることは、このようなものです

.text-div p:first-child {
    overflow:hidden;
    line-height:(a number matching (img height + bottom margin) divider)
}

このように、最初の段落は .. の下に折り返されませんが、他の段落は折り返され<p>ます

あなたのためのjsfiddle：http://jsfiddle.net/6FQuH/

それ以外の場合 --> JavaScript

Answer 2

そのため、写真の下で孤立しているように見えないほど長い場合にのみ、テキストを折り返す必要があります。

残念ながら、これは CSS だけでは不可能です。あなたができる最も近いことは、各タグの段落ごと<p>に、その段落の残りのテキストが折り返されず、次の段落が全幅になるようにすることです。そのように: http://jsbin.com/avogil/1/edit

もちろんJavascriptでも可能で、フローティング画像と段落のサイズを比較し、その差をフォントサイズと比較します。おそらくjQueryを使用したいと思うでしょう。

おそらく将来の CSS 仕様で、いつかこのケースに対処するかもしれません。

Answer 3

この状況でできる唯一のことは、画像の余白を約 2 倍にすることです。フォントサイズの 2 倍。12px のフォント サイズ、24px の余白の下。孤立したままにすることもできますが、上記の場合、テキストは折り返されずにインラインのままになり、テキストがはるかに長い場合は適切に折り返されます。孤立した行が 1 行残っている可能性がある小さなウィンドウが残ります。