如何使内部img的边缘底部和外部div崩溃的底部？

Question

我在div里面有一个img。 img浮动正确，文本应该从左边围绕它（如果它是一个长文本）从底部开始像这样：

text text:IMG
text text:IMG
text text::::
text text tex
:::::::::::::

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

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

text text:IMG
text text:IMG
         ::::
:::::::::::::

但应该是这样的：

text text:IMG
text text:IMG
:::::::::::::

那么，如何让内部img的边缘底部和外部div的边缘底部崩溃？

假设边际崩溃不起作用，因为内外关系或两个边缘都是底边缘？

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

谢谢

CODE

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