html - 整个文本文章中的多个 float 图像

Question

CSS 有问题，我认为没有 javascript 也可以实现我想要的效果，但我不确定。

我有一篇文字文章，我想用 0-3 张图片显示(每篇文章的数字是动态的)。我想在页面右侧显示 3 个图像，它们之间的距离约为 200-300 像素。我仅通过 float 图像、使用透明和边距就实现了这一点。

我没能做到的部分是让文本在 200-300 像素的空间中的图像之间流动。我已经尝试相对定位将图像向下推到我想要它们所在的页面部分，但是通过 float 它们在文本中为它们保留的空白区域保持原样(即图像最终位于文本之上) .

如果没有 js，这甚至可能吗？文本也是完全动态的，所以我不能使用文本中的任何元素作为 anchor 。

编辑:这里有一些代码来解释一下:

标签:

<div>
    <img class="floater" src="get_file.asp?image=1"/>
    <img class="floater" src="get_file.asp?image=2"/>
    <img class="floater" src="get_file.asp?image=3"/>
    <p>lots and lots of text and paragraphs go here....</p>
</div>

CSS:

.floater
{
    float:right;
    height:250px;
    clear:both;
    margin-top:200px;//This creates space between the images, but the text doesn't flow between them
}

Answer 1

您只能通过使用额外的辅助元素来实现它。

看看这个 fiddle :http://jsfiddle.net/kizu/BwySX/

您只需添加宽度为零的辅助元素，因此它们会以其高度插入您的 float 内容，但由于它们的宽度为零，文本在它们附近几乎完美地流动。