Floating Thumbnails

http://realworldstyle.com/thumb_float.html

用css排列缩略图

问题：如果你需要一些缩略图来链接到真实的大图，这是一个很常见的应用。再复杂一点，每个缩略图都有一个标题需要放在图下面。因此，你需要将图片以行为单位排列在屏幕上。但是当浏览器窗口不同时，图片将会自动调整行数（流体布局）。我们不用table，而是用css来完成。

一步一个胶印

第一：每个缩略图需要一个排在下面、中间的标题。如果用table，每个图片/标题对需要一个td。用css需要将它们放在一个div中。为了让它们在水平方向上一行一行排列，需要将所有这些div浮动到左边。因此，得到：

div.float {
 float: left;
 width: 120px;
 padding: 10px;
 }
 
div.float p {
   text-align: center;
   }
html 代码 :
<div class="float">
 <img src="image1.gif"><br>
 <p>caption 1</p>
</div>：
 
<div class="float">
 <img src="image2.gif"><br>
 <p>caption 2</p>
</div>
 
<div class="float">
 <img src="image3.gif"><br>
 <p>caption 3</p>
</div>

如图：

第二步，让缩略图在需要的时候换行。

其实，上面使用了float之后，已经满足了这个需要。

当窗口大时，

但窗口变小的时候，缩略图自己调整了行数。

第三步，如果你的缩略图有好几类，你想显式地用背景或边框来区别。那么使用div将同一类的放在一起。

div.container {
 border: 2px dashed #333;
 background-color: #fff;
 }

但是这样做有一个问题。因为float的原因，一个float的元素将不在正常的文档流中占空间，这会造成container无法包括你想包括进去的图片，因此加入clear。

div.spacer {
 clear: both;
 }

现在的代码如下，注意在代码的开始和结束处都有sapcer。

<div class="spacer">
  
</div>
 
<div class="float">
 <img src="image1.gif"><br>
 <p>caption 1</p>
</div>
 
<div class="float">
 <img src="image2.gif"><br>
 <p>caption 2</p>
</div>
 
<div class="float">
 <img src="image3.gif"><br>
 <p>caption 3</p>
</div>
 
<div class="spacer">
  
</div>
 
</div>
 

窗口足够大的时候，

窗口小的时候，虚线的边框也跟着变化了。