CSS - 图像上的不同边距取决于文本的数量

Question

我有一个容器 div(显示为蓝线)，它具有固定宽度和可变高度，具体取决于内部内容。 div 可以包含文本和图像。文本始终向左浮动，图像始终向右浮动。除了左侧(靠近文本)之外，图像的每一侧都有 2px 的边距。

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

Answer 1

这是默认行为，因为 float 已从正常流中移除。默认情况下， float 图像(及其边距)会溢出包含的段落。

演示地址:http://jsfiddle.net/m937Q/

我测试的 css:

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

注意事项:

如果你的 div 有一个新的 block formatting context (如果它 float 或溢出会发生:隐藏；除其他外)它将包含其 float 和边距:http://jsfiddle.net/m937Q/2/