百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> css 图片加文字排列方式
分享文章到:

css 图片加文字排列方式

发布时间:01/15 来源: 浏览: 关键词:

今天我们来看看图片用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

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有10人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板