用css排列缩略图

 

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="container">

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

窗口足够大的时候，

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