css 图片加文字排列方式

今天我们来看看图片用div怎么排列多行多列的情况,如下图的效果

<div id="firstContent1">
      <div id="AnLiLeft" class="floatLeft">
      
       <div class="AnLiPic">
        <div><a href="http://www.htbabe.cn" target="_blank"><img src="ProImage/00000366_s.jpg" alt="网盈网络网站建设经典案例--长沙亨通母婴用品有限公司" width="146" height="91" border="0" /></a></div>
        <div class="AnLiText"><a href="http://www.htbabe.cn" target="_blank" title="长沙亨通母婴用品有限公司">长沙亨通母婴用品有限公司</a></div>
       </div>
      
      
       <div class="AnLiPic">
        <div><a href="http://www.2-00.com" target="_blank"><img src="ProImage/00000365_s.jpg" alt="网盈网络网站建设经典案例--中国企业建站平台" width="146" height="91" border="0" /></a></div>
        <div class="AnLiText"><a href="http://www.2-00.com" target="_blank" title="中国企业建站平台">中国企业建站平台</a></div>
       </div>
      
      
       <div class="AnLiPic">
        <div><a href="http://www.image08.com/" target="_blank"><img src="ProImage/00000364_s.jpg" alt="网盈网络网站建设经典案例--长沙新画佳光电子有限公司" width="146" height="91" border="0" /></a></div>
        <div class="AnLiText"><a href="http://www.image08.com/" target="_blank" title="长沙新画佳光电子有限公司">长沙新画佳光电子有限公司</a></div>
       </div>
      
      
       <div class="AnLiPic">
        <div><a href="http://www.jcshiye.com/" target="_blank"><img src="ProImage/00000363_s.jpg" alt="网盈网络网站建设经典案例--长沙佳程工矿实业有限公司" width="146" height="91" border="0" /></a></div>
        <div class="AnLiText"><a href="http://www.jcshiye.com/" 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.cn/cssdiv/css.html