图像文本左对齐，内部div

Question

我的图像左侧有文字对齐。图像和文本都坐在div中，我在帖子的背景中看起来像一个红色的泡泡。气泡只能到文本而不是图像（图像比文本下降得更远），导致图像闯入其他帖子。如何使这个div的大小适合我所放入的任何东西（在这种情况下是图像）？

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

Answer 1

将overflow:auto添加到.post-bubble规则。

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

<强> jsFiddle example

Answer 2

如果您希望内容允许其中的任何内容，请将其overflow:auto。

如果您希望扩展气泡以覆盖img标记，请为.post-bubble提供一个高度：

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

图像扩展到div的原因是因为img在声明align:right时从页面流中取出，即不再是块元素。

Answer 3

要么将overflow:auto;添加到后泡泡div中，要么为后泡泡div定义高度，例如.. height: 600px;很好地涵盖了它。

Answer 4

在div标签上执行display：block in css

Answer 5

我认为最好的解决方案是强迫元素自我清理孩子。

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

您还可以为项目/项目中的其他元素创建特定类，例如：

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

并将此类（.clear-children，without：after）添加到具有浮动子元素的每个元素中。

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