0

テキストが左側に配置された画像があります。画像とテキストの両方が、投稿の背景に赤いバブルのように見えるようにスタイル設定した div 内に配置されています。吹き出しは、画像ではなくテキストまでしか移動しないため (画像はテキストよりはるかに下に移動します)、画像が他の投稿に割り込んでしまいます。この div を、入れたもの (この場合は画像) に収まる正しいサイズにするにはどうすればよいですか?

jsfiddle: http://jsfiddle.net/Sederu/CzNr6/
4

5 に答える 5

1

バブル後の div に追加overflow:auto;するか、バブル後の div に高さを定義しheight: 600px;ます。

于 2013-04-17T19:21:07.013 に答える
1

overflow:auto.post-bubble ルールに追加します。

div.post-bubble {
    padding: 10px;
    background-color: #e17474;
    border-radius: 10px;
    overflow:auto;
}

jsFiddle の例

于 2013-04-17T19:17:15.227 に答える
0

最善の解決策は、要素に強制的にその子を強制的にクリアさせることだと思います。

div.post-bubble:after {
    clear: both;
    content: '';
    display: table;
}

次のようなプロジェクト内の他の要素に対して特定のクラスを作成することもできます。

.clear-children:after {
    clear: both;
    content: '';
    display: table;
}

そして、このクラス (.clear-children、:after なし) を、フロートされた子を持つすべての要素に追加します。

http://jsfiddle.net/CzNr6/4/

于 2013-04-17T21:23:42.997 に答える