Question

有CSS的问题，我认为我想要的是没有javascript，但我不确定。

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

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

没有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
}

Answer 1

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

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

你只需要添加零宽度的辅助元素，这样它们就可以用它们的高度来推动你的浮动元素，但是因为它们的宽度为零，所以文本几乎完美地靠近它们。

Answer 2

不确定是否可行。保证金总是把一切都推到一边。

我将文本分成段落，每段只有一个图像。然后图像可以浮在里面。

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

2 个答案: