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

Question

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

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

Answer 1

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

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

我测试的css：

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

注意：

如果您的 div 有一个新的block formatting context（如果它是浮动的或溢出的：隐藏；除其他外），它将包含它的浮动和边距：http://jsfiddle.net/m937Q/2/