整个文本文章中的多个浮动图像

Posted 2023-03-06

【中文标题】整个文本文章中的多个浮动图像

【英文标题】：Multiple Float Images Throughout Text Article

【发布时间】：2011-12-03 01:33:23

【问题描述】：

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

我有一篇文章，我想用 0-3 张图片显示（每篇文章的数字是动态的）。我想在页面的右侧显示 3 张图片，它们之间的距离约为 200-300 像素。这就是我通过浮动图像、使用清晰和边距来实现的。

我无法做到的部分是允许文本在 200-300 像素的空间内的图像之间流动。我已经尝试过相对定位将图像向下推到我想要它们的页面部分，但是通过浮动它们在文本中为它们保留的空白空间保持在原来的位置（即图像最终位于文本顶部） .

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

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

标签：

<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

【参考方案1】：

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

看看这个小提琴：http://jsfiddle.net/kizu/BwySX/

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

【参考方案2】：

不确定这是否可能。边距总是把所有东西都推到一边。

我会将文本分成几段，每段只有一张图片。然后图像可以漂浮在其中。

【讨论】：

好吧，文本分为段落，但它是预先生成的，所以我不能保证它们有任何顺序。与段落混合的是 div、 标签等，我不想漂浮在左对齐标题标签的右边缘，所以我不能只抓住一个通用元素并漂浮在其中。我考虑了一段时间。