我有一个容器 div(显示为蓝线),它具有固定宽度和可变高度,具体取决于内部内容。 div 可以包含文本和图像。文本始终向左浮动,图像始终向右浮动。除了左侧(靠近文本)之外,图像的每一侧都有 2px 的边距。
如果文本不适合图像旁边,我希望它环绕图像,但也有 10 像素的边距。这是否可能,以便当文本不够长时,图像底部的边距保持在 2px?
最佳答案
这是默认行为,因为 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/
关于CSS - 图像上的不同边距取决于文本的数量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23536125/