html - 如何在图像列表周围 float 文本 (CSS)

Question

我对图像列表周围的 float 文本有疑问。

我的目标:

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

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

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

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; }

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