html - 图像可以与 float 元素旁边的文本一起流动吗？

Question

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

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

我有一个容器 div，其类为 .wrap，其中填充了文本。在其中，我有一个 300px 的方形 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;
}