图文混排/全图排版
点击数：2680 发布时间2012-01-24 23:03:57
XHTML部分代码如下：
<div id="pic"> //大容器名pic
<div><img src="
001s.jpg" width="140" height="105"><h3>图片1</h3></div>
<div><img src="
a4.jpg" width="200" height="138" ><h3>图片1</h3></div>
<div><img src="
003s.jpg" width="140" height="105"><h3>图片1</h3></div>
<div><img src="
a1.jpg" width="180" height="160" ><h3>图片1</h3></div>
<div><img src="
a2.jpg" width="150" height="201" ><h3>图片1</h3></div>
<div><img src="
a3.jpg" width="175" height="149" ><h3>图片1</h3></div>
</div>
CSS部分代码如下：
#pic{
width:360px;
}
#pic div{
width:100px;overflow:hidden;float:left
}
img{
width:100px;height:75px;margin:0px 10px 0px 10px
}
h3{
text-align:center;font-size:12px;font-weight:normal;margin-top:10px
}
最后为了使图片更加美观可添加如下代码：
img{
border::#000 solid 1px;padding:1px}
