css - 图片文本左对齐，在 div 内

Question

我有一个文本与它的左侧对齐的图像。图像和文本都位于一个 div 中，我将其设置为帖子背景中的红色气泡。气泡只到达文本而不是图像（图像比文本下降得更远），导致图像闯入其他帖子。如何使这个 div 的大小适合我放入其中的任何内容（在本例中为图像）？

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

score 1 · Accepted Answer

添加overflow:auto到您的 .post-bubble 规则中。

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

score 1 · Accepted Answer

如果您希望内容允许其中包含任何内容，请给它overflow:auto.

但是，如果您希望气泡延伸以使其也覆盖img标签，请给出.post-bubble高度：

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

图片之所以比 div 延伸得更远，是因为在img声明align:right.

score 1 · Accepted Answer

要么添加overflow:auto;到您的气泡后 div 中，要么为气泡后 div 定义一个高度，例如..height: 600px;很好地覆盖它..

score 0 · Accepted Answer

0

在 div 标签上做一个 display:block in css

于 2013-04-17T19:19:25.110 回答

score 0 · Accepted Answer

我认为最好的解决方案是强制 element 自我清除它的孩子。

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

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

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

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

5 回答 5