CSS-根据文字的数量，图片的边距有所不同

Question

我有一个容器div（显示为蓝线），它具有设置的宽度和可变的高度，具体取决于内部的内容。 div可以包含文本和图像。 文本始终向左浮动，图像始终向右浮动。 除左侧（靠近文字）外，图片的每一边有2px的空白。

如果文本不适合图像的旁边，我希望它可以环绕图像，但也要留有10px的空白。 这是否可能，以便当文本不够长时，页边距保持在图像底部的2px？

Answer 1

这是默认行为，因为浮子已从正常流中移除。 默认情况下，浮动图像（及其边距）将溢出包含的段落。

演示位于： http : //jsfiddle.net/m937Q/

我测试过的CSS：

p {
    width: 300px;
    background-color: wheat;
}
p img {
    float: right;
    margin-bottom: 10px;
}

注意：

如果您的div具有新的块格式化上下文 （如果它是浮动的或溢出的，则会发生：隐藏；除其他外），它将包含其浮动和边距： http : //jsfiddle.net/m937Q/2/