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; }

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

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

因此.mpu广告单元向右浮动，但由于负.wrap，因此margin-right容器的右边缘也会突出2em。容器内的文本整齐地围绕广告块流动，但是，当广告块旁边插入图片标记时，会在图像显示在其下方时创建一个空白区域。

是否可以强制图像以与文本相同的方式在浮动元素周围流动？我知道广告单元已应用浮动，因此已从文档流中删除，因此图像被设置为其父元素宽度的100％，即.wrap的宽度。是否有解决方法或咳嗽...黑客可以覆盖这种行为？

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

Answer 1

我会使图像浮动，图像周围有一个很好的边距。这是代码：

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

.newimageclass {
    float:left;
}

希望有所帮助！

Answer 2

我认为你要做的是：https://jsfiddle.net/7z0yypw1/6/

将img包装在一个包装元素中，并为其提供一个类imageWrapper。然后申请

holdable(widgetinstance).connect(self.holdingCallback)

图像是否可以在浮动元素旁边显示文本？

2 个答案: