问题描述
我在尝试找到一个简单的解决方案,不使用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?
请参考下面的小提琴演示:
Please refer to the following fiddle for a working demo: https://jsfiddle.net/7z0yypw1/
推荐答案
我想你在尝试要做的是:
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;
}
这篇关于图片是否可以在浮动元素旁边显示文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!