图片是否可以在浮动元素旁边显示文本？ [英] Can an image flow with text next to a floated element?

问题描述

我在尝试找到一个简单的解决方案，不使用JS 来处理下面的问题。

I'm trying to find a simple solution to the following problem without using JS.

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

我有一个容器div，类名为 .wrap 填充文本。在这里，我有一个300像素的方形div与类的 .mpu 将显示广告。广告单元出现在文本段落之间，并应用了以下样式：

I have a container div with a class of .wrap that is filled with text. Inside this, I have a 300px square div with a class of .mpu that will display adverts. The ad unit appears between paragraphs of text and has the following style applied:

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

我也有一个标准片段，强制使用视口调整图片大小在一定宽度下：

I also have a standard snippet in place for forcing images to resize with the viewport under a certain width:

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

因此 .mpu 广告单元向右浮动，但也从 .wrap 容器的右侧边缘伸出2em，因为负数 margin-right 。容器中的文本会整齐地围绕广告块，但是，当在广告代码块旁边插入图片代码时，会在图片下方显示一个空格。

So the .mpu ad unit is floated to the right but also sticks out 2em from the right-hand edge of the .wrap container because of the negative margin-right. The text inside the container flows neatly around the ad block, however, when an image tag is inserted beside the ad block, a white space is created as the image appears underneath it.

是否可能强制图像以文本相同的方式在浮动元素周围流动？我知道，广告单元有一个浮动应用，因此已从文档流中删除，所以图像设置为其父元素的宽度的100％即 .wrap 的宽度。是否有解决方法或语法… a hack to override this behavior？

Is it possible to force images to flow around floated elements in the same way that text does? I'm aware that the ad unit has a float applied and has therefore been removed from the document flow so the image is being set to 100% of it's parent element's width i.e. .wrap's width. Is there a workaround or ahem… a hack to override this behaviour?

请参考下面的小提琴演示： https://jsfiddle.net/7z0yypw1/

Please refer to the following fiddle for a working demo: https://jsfiddle.net/7z0yypw1/

推荐答案

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

I think what you are trying to do is this: https://jsfiddle.net/7z0yypw1/6/

将你的img封装在一个包装器元素中，并给它一个类imageWrapper。然后应用

Wrap your img in a wrapper element, and give it a class imageWrapper. Then apply

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

这篇关于图片是否可以在浮动元素旁边显示文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！