如何使内部img的margin-bottom和外部div的margin-bottom折叠？

Question

我在 div 中有一个 img。 img 向右浮动，文本应从左侧和（如果是长文本）从底部围绕它，如下所示：

文字文字：IMG 文字文字：IMG 文本文本:::: 文本 文本 tex ::::::::::::::

冒号应该代表空格（边距）。

如果是长文本，一切正常。但是如果文本太短而不能超过img的高度，结果是这样的：

文字文字：IMG 文字文字：IMG :::: ::::::::::::::

但应该是这样的：

文字文字：IMG 文字文字：IMG ::::::::::::::

那么，如何让内部 img 的 margin-bottom 和外部 div 的 margin-bottom 折叠？

假设由于内外关系或两个边距都是底边距而导致边距折叠不起作用？

可能相关：我使用 box-sizing:border-box

谢谢

代码

HTML：

<div>
    <img src="image.png" alt="" />
    Some text
</div>

CSS：

div {
    margin-bottom: 10px;
}

div img {
    float:right;
    margin: 0 0 10px 10px;
}

---

编辑

我的解决方法：

HTML

<div>
    <img src="image.png" alt="" />
    <div>
        Some text
    </div>
</div>

CSS

div {

}

div img {
    float:right;
    margin: 0 0 10px 10px;
}

div div {
    margin-bottom: 10px;
}

Answer 1

问题是 div 元素显示为内联；你需要段落和图像是一个块， 所以你应该使用 display:inline-block，像这样：

div {
margin-bottom: 10px;
display:inline-block;
}

div img {
    float:right;
    margin: 0 0 10px 10px;
}

你可以看到结果here