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