Floating Thumbnails
用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>
如图:
![](https://p-blog.csdn.net/images/p_blog_csdn_net/yethyeth/aa415a0c3ae1479ca9fb64daf6d49d00.png)
第二步,让缩略图在需要的时候换行。
其实,上面使用了float之后,已经满足了这个需要。
当窗口大时,
![](https://p-blog.csdn.net/images/p_blog_csdn_net/yethyeth/f0cd5cc4d6c6462395d8945bda480467.png)
但窗口变小的时候,缩略图自己调整了行数。
![](https://p-blog.csdn.net/images/p_blog_csdn_net/yethyeth/fcc5e2213a9640468094440877d66978.png)
第三步,如果你的缩略图有好几类,你想显式地用背景或边框来区别。那么使用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>
窗口足够大的时候,
窗口小的时候,虚线的边框也跟着变化了。
![](https://p-blog.csdn.net/images/p_blog_csdn_net/yethyeth/1669fd0547064a429a225ac0921b59db.png)