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

Question

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

我的目标：

• 在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/

Answer 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/