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
}
最佳答案
您只能通过使用额外的辅助元素来实现它。
看看这个 fiddle :http://jsfiddle.net/kizu/BwySX/
您只需添加宽度为零的辅助元素,因此它们会以其高度插入您的 float 内容,但由于它们的宽度为零,文本在它们附近几乎完美地流动。
关于html - 整个文本文章中的多个 float 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7688548/