如何在图像列表（CSS）周围浮动文本答案

【问题标题】：How to float Text around a List of Images (CSS)如何在图像列表（CSS）周围浮动文本
【发布时间】：2014-12-29 14:15:43
【问题描述】：

我在图像列表周围浮动文本时遇到问题。

我的目标：

content-div 的开头是图像标签列表。
图像每次都具有相同的大小。
每张图片在页面上都有固定的位置。
文本应从页面顶部开始。
文字应围绕图像浮动。

HTML

<div class="content">
  <img src="image_1.jpg" class="image_1">
  <img src="image_2.jpg" class="image_2">
  <img src="image_3.jpg" class="image_3">
  <img src="image_4.jpg" class="image_4">
  <img src="image_5.jpg" class="image_5">
  <!-- some text -->
</div>

CSS

.content{ position: relative; width: 500px; margin: auto; }
img{ position: absolute; width: 250px; }
.image_1{ top: 20em; left: 0; }
.image_2{ top: 70em; right: 0; }
.image_3{ top: 120em; left: 0; }
.image_4{ top: 170em; right: 0; }
.image_5{ top: 220em; left: 0; }

图像的位置是完美的，但文字并没有在它们周围浮动。

是否有可能用 css 完成这项工作，如果可能的话，如何做到这一点？

预期的 HTML：

http://jsfiddle.net/31cu5c1x/

预期结果：

http://jsfiddle.net/r341ej1r/

【问题讨论】：

jsfiddle.net/jessikwa/rnLf75g2我不希望这是您正在寻找的解决方案，但这是否显示您正在寻找的效果？
@jessikwa 我期望的结果是jsfiddle.net/r341ej1r 但是要得到这个结果，格式是这样的：但我想要这样的格式但结果相同
我不相信这可以实现。是否绝对有必要将所有文本都放在图像之后？
是的，这是必要的。我想用 php 构建页面，而不知道文本的长度或图像的数量。这取决于内容作者。所以我想创建一个类似模板的东西，其中第一个图像每次都在同一个位置，如果它们在那里，第二个到第五个也在同一个位置。然后文本是否应该漂浮在这些图像周围。
我对 PHP 知之甚少，所以我不确定您将如何设置所有内容，但也许可以使用 Javascript 来检查将要添加到 DOM 中的图像数量并动态每隔一定数量的字符插入它们，在左右浮动之间交替？

标签： html css css-float css-position floating

【解决方案1】：

我认为您可以通过使用浮点数并在图像和文本之后清除每个浮点数来完成此操作。

HTML

<div class="content">
  <img src="http://placehold.it/250/000000" class="image_1"/>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div class="clear"></div>
  <img src="http://placehold.it/250/ccc" class="image_2"/>
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    
  <div class="clear"></div>
  <img src="http://placehold.it/250/222" class="image_3"/>
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
  <div class="clear"></div>
  <img src="http://placehold.it/250/eee" class="image_4"/>
     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
  <div class="clear"></div>
  <img src="http://placehold.it/250/555" class="image_5"/>
     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <div class="clear"></div>
</div>

CSS

.content{ width: 500px; margin: auto; }
img{ width: 250px; }
.image_1{ top: 20em; float: left; }
.image_2{ top: 70em; float: right; }
.image_3{ top: 120em; float: left; }
.image_4{ top: 170em; float: right; }
.image_5{ top: 220em; float: left; }
.clear { clear: both; }

我还在学习，但也许这会有所帮助。这是一个小提琴：http://jsfiddle.net/om7qfebz/

【讨论】：

感谢您的回答，但在您的回答中，您在图像之间写下了文字。那不是我想要的。我想在 html 的开头有一个图像列表，并使用 css 设置此图像的位置，而不是让 html 中所有图像标签下方的文本块围绕所有图像浮动。