第1步 - 从一些缩略图和标题开始
在本练习中，我们希望将所有缩略图移动到行中，例如表格单元格。我们将要使用的方法允许任意数量的图像彼此相邻，具体取决于包含框的宽度。
从6个图像和标题开始，每个图像和标题都在自己的div中。这些div都被赋予了一个名为“thumbnail”的类。
第2步 - 浮动div
将“float：left”应用于.thumbnail规则。这将强制每个div到包含框的左边缘或直到它到达另一个div的边缘。浮动元素时也需要宽度 - 除非它是图像。
.thumbnail
{
float: left;
width: 60px;
}
第3步 - 添加边框
为了更容易看到发生了什么，使用“border：1px solid＃666;”为div添加边框。Netscape 4不喜欢这个规则，所以它应该使用“ @import ” 隐藏在浏览器中。
border: 1px solid #999;
第4步 - 添加保证金
可以添加边距以将div推离彼此。
如果Netscape 4是目标浏览器，则应使用简写规则（例如“margin-left：20px;”和“margin-bottom：20px;”），因为此浏览器严重误解了与边距相关的速记规则。
如果符合标准的浏览器是目标，并且边界规则对Netscape 4隐藏（使用“ @import ”），则可以使用单个速记规则 - “margin：0 15px 15px 0;”。
请记住，速记值按顺时针顺序应用; 顶部，右侧，底部，左侧。
margin: 0 15px 15px 0;
第5步 - 强制换行
如果您使用的是液体布局（内容区域将由用户浏览器窗口大小的宽度决定），您可能希望根据需要让缩略图流向新行。但是，如果您使用的是包含设置宽度的框，则可能希望强制换行并在每一行上设置一定数量的缩略图。
有几种方法可以实现这一目标。在本练习中，我们将使用BR为“clear：both”的BR。
.clearboth { clear: both; }
<br class="clearboth">
第6步 - 添加填充
此时，您可能希望删除div周围的边框。如果要保留边框，则必须添加一些填充，以使其远离图像。
padding: 5px;
完了！
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.thumbnail {
float:left;
width:60px;
border:1px solid red;
margin:0 15px 15px 0;
padding:5px;
}
.clearboth {
clear:both;
}
</style>
</head>
<body>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
标题
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
标题
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
标题
</div>
<br class="clearboth">
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
标题
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
标题
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
标题
</div>
</body>
</html>效果图如下：
