html - float 元素旁边的文本可以流动吗？

Question

我正在尝试为以下问题找到一个简单的解决方案而不使用 JS。

<div class="wrap">
  <p>[...]</p>
  <div class="mpu"></div>
  <img src="img-src">
  <p>[...]</p>
</div>

我有一个容器 div，其中包含一类 .wrap，其中填充了文本。在其中，我有一个 300 像素的方形 div，其中包含一个类 .mpu，它将显示广告。广告单元出现在文本段落之间并应用了以下样式:

.mpu{
  display: inline-block;
  float: right;
  width: 300px;
  height: 300px;
  margin: 1em -2em 1em 1em;
}

我还有一个标准片段，用于强制图像在特定宽度下随视口(viewport)调整大小:

img{
  max-width: 100%;
  height: auto!important;
}

因此 .mpu 广告单元向右浮动，但也从 .wrap 容器的右边缘伸出 2em，因为负 右边距。容器内的文本整齐地围绕广告 block 排列，但是，当在广告 block 旁边插入图像标签时，会在图像下方出现空白区域。

是否可以强制图像以与文本相同的方式围绕 float 元素流动？我知道广告单元应用了 float ，因此已从文档流中删除，因此图像被设置为其父元素宽度的 100%，即 .wrap 的宽度。是否有解决方法或咳咳……可以改写此行为的黑客攻击？

请引用以下 fiddle 以获得工作演示:https://jsfiddle.net/7z0yypw1/

Answer 1

我认为您正在尝试做的是:https://jsfiddle.net/7z0yypw1/6/

将您的 img 包装在包装器元素中，并为其指定一个类 imageWrapper。然后申请

.imageWrapper {
    display:block;
    overflow:hidden;
}