0

私は休みの日を過ごしているに違いありません、私はcssによって混乱しています。

存在するかもしれないし存在しないかもしれない画像があります。最小限のマークアップで、テキストのブロック全体をプッシュして、長すぎる場合に画像の下に折り返されないようにします。通常は、画像をフロートさせて設定されたマージンを使用しますが、画像が存在しないため、より柔軟なソリューションが必要な場合があります。たぶん、このイラストが役立つでしょう。

ここに画像の説明を入力してください

追加のマークアップなしで、または2つの異なるクラスを動的に使用してそれを行う方法は考えられません。私が試したことのほとんどは、一方または両方の要素をフローティングにすることです。pには長さが設定されていないため、imgの下にpadding-bottomを配置するだけでは不十分な場合や、pが短すぎると不要なスペースが発生する場合があります。助言がありますか？

編集：これはMark Adamsの好意によるjsfiddleですが、それは私が立ち往生しているところです。

JSFiddle

4

2 に答える 2

2

画像を左にフロートさせることはできませんか？または、あなたの質問から何かが欠けていますか？

このような：

http://jsfiddle.net/cGQ6K/

編集-または、段落にオーバーフローがある場合などに画像を非表示にしたいですか?

edit2-jsfiddle の段落にテキストを追加した後、あなたの言いたいことがわかると思います...解決策を考えてみます

edit3 - ここにあなたが望む解決策があります: http://jsfiddle.net/cGQ6K/7/ただし、少しハックを使用します。

于 2012-09-28T19:30:28.830 に答える
0

Mark Adams の例が機能するため、なぜ問題が発生するのかわかりませんが、場合によっては「クリア」CSS プロパティで解決できると思います。

ほとんどの場合は「clear:both」を使用しますが、画像に対して「clear:right」または「right」を試すこともできます。

CSS Clear プロパティのリファレンスを参照してください: http://www.w3schools.com/cssref/pr_class_clear.asp

于 2012-09-28T19:40:09.733 に答える