今天我们来看看图片用div怎么排列多行多列的情况,如下图的效果
代码如下
复制代码
<div id="firstContent1">
<div id="AnLiLeft" class="floatLeft">
<div class="AnLiPic">
<div><a href="" target="_blank"><img src="ProImage/00000366_s.jpg" alt="网盈网络网站建设经典案例--长沙亨通母婴用品有限公司" width="146" height="91" border="0" /></a></div>
<div class="AnLiText"><a href="" target="_blank" title="长沙亨通母婴用品有限公司">长沙亨通母婴用品有限公司</a></div>
</div>
<div class="AnLiPic">
<div><a href="" target="_blank"><img src="ProImage/00000365_s.jpg" alt="网盈网络网站建设经典案例--中国企业建站平台" width="146" height="91" border="0" /></a></div>
<div class="AnLiText"><a href="" target="_blank" title="中国企业建站平台">中国企业建站平台</a></div>
</div>
<div class="AnLiPic">
<div><a href="/" target="_blank"><img src="ProImage/00000364_s.jpg" alt="网盈网络网站建设经典案例--长沙新画佳光电子有限公司" width="146" height="91" border="0" /></a></div>
<div class="AnLiText"><a href="/" target="_blank" title="长沙新画佳光电子有限公司">长沙新画佳光电子有限公司</a></div>
</div>
<div class="AnLiPic">
<div><a href="/" target="_blank"><img src="ProImage/00000363_s.jpg" alt="网盈网络网站建设经典案例--长沙佳程工矿实业有限公司" width="146" height="91" border="0" /></a></div>
<div class="AnLiText"><a href="/" target="_blank" title="长沙佳程工矿实业有限公司">长沙佳程工矿实业有限公司</a></div>
</div>
<div class="AnLiPic">
<div><a href="http://www.haihuigm.cn" target="_blank"><img src="ProImage/00000362_s.jpg" alt="网盈网络网站建设经典案例--湖南海汇工贸有限责任公司" width="146" height="91" border="0" /></a></div>
<div class="AnLiText"><a href="http://www.haihuigm.cn" target="_blank" title="湖南海汇工贸有限责任公司">湖南海汇工贸有限责任公司</a></div>
</div>
<div class="AnLiPic">
<div><a href="http://www.hnyzgg.com.cn/" target="_blank"><img src="ProImage/00000361_s.jpg" alt="网盈网络网站建设经典案例--长沙艺展广告有限公司" width="146" height="91" border="0" /></a></div>
<div class="AnLiText"><a href="http://www.hnyzgg.com.cn/" target="_blank" title="长沙艺展广告有限公司">长沙艺展广告有限公司</a></div>
</div>
</div>
好了下面我们来看看css是怎么定义的吧.
代码如下
复制代码
#firstContent1{
margin:0px 2px 2px;
height:249px!important;
height:248px;
background:#F2F2F2;
}
#AnLiLeft{
width:520px;
height:100%;
}
.AnLiPic{
margin:10px 0px 0px 15px;
border:1px solid #ccc;
float:left;
}
就这么简单的其它的我就不说了,只申明一下本站原创文章转载请注明:www.111cn.net/cssdiv/css.html
