<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0 auto;
font-size:12px;
font-family:Verdana;
line-height:1.5;
}
ul{
padding:0;
margin:0;
list-style:none;
}
a {
color:#05a;
display:block;
text-decoration:none;<!--去掉超链接a下划线-->
}
a:hover {
color:#f00;
}
#layout ul li {
width:72px;
float:left;
margin:20px 0 0px 20px;
display:inline;
text-align:center;
}
#layout{
width:400px;
border:2px solid #ccc;
padding:2px;
overflow:auto;
zoom:1;
}
#layout ul li a img {
padding:1px;
border:1px solid #e1e1e1;
margin-bottom:3px;
width:68px;
height:54px;
}
#layout ul li a:hover img {
padding:0px;
border:2px solid #f98510;
}
</style>
</head>
<body>
<div id="layout">
<ul>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
<li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
</ul>
</div>
</body>
</html>
<!--如果在前后Div上没有浮动的则该浮动div在这一行在浮动指定的方向（本行最左边，最右边）安放，如果前后有浮动的，则按先后浮动的顺序安放，行内有空格的话换到下一行，如没指定边距，则下一行从头开始
如果一行里全是浮动，没有能占一行的，则下面的div始终能补充上来，除非空间不够，移到下一行
-->