图像中的文本是否可以在浮动元素旁边流动？

Question

我试图在不使用JS的情况下找到以下问题的简单解决方案。

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

我有一个容器div，它的.wrap类充满了文本。在这里面，我有一个300 of正方形的div，它有一个.mpu类，可以显示广告。广告单元出现在文本段落之间，并应用以下样式：

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

我还设置了一个标准片段，用于强制图像在一定宽度下使用视口调整大小：

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

因此，.mpu广告单元是漂浮在右边，但也突出2em从右手边的.wrap容器，因为负margin-right。容器内的文本在广告块周围整齐地流动，但是，当在广告块旁边插入图像标记时，当图像出现在广告块下面时，会创建一个空白。

是否有可能像文本一样强迫图像在浮动元素周围流动？我知道广告单元有一个浮动应用，因此已经从文档流中删除，所以图像被设置为它的父元素的宽度的100%，即.wrap的宽度。是否有一个解决方案或者…是一个黑客来覆盖这种行为？

有关工作演示，请参阅以下小提琴：https://jsfiddle.net/7z0yypw1/

Answer 1

我想你想做的是：https://jsfiddle.net/7z0yypw1/6/

将您的img封装在一个包装元素中，并给它一个类imageWrapper。然后申请

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

Answer 2

我会使图像浮动，在图像周围有一个很好的边缘。以下是代码：

img {
   height:auto;
   max-width: 100%; /* set to what you want */
}

.newimageclass {
    float:left;
}

希望这能帮上忙！