精美而实用的网站，关注web编程技术、网站运营、SEO推广，让您轻松愉快的学习

本例主要实现了：div+css上图下文图文列表，这是web项目开发过程中最常用的一种图文布局结构，本例主要用于初期div+css布局学习，也可以直接用于项目开发。

div+css上图下文图文列表效果图

div+css上图下文图文列表HTML代码

<div class="m-list4">
    <ul class="f-cb">
        <li>
            <div class="u-img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg" alt="" /></a></div>
            <h3><a href="#">有标题</a></h3>
            <p class="f-toe">有内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述</p>
        </li>
        <li>
            <div class="u-img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg" alt="" /></a></div>
            <h3><a href="#">有标题</a></h3>
            <p class="f-toe">有内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述</p>
        </li>
        <li>
            <div class="u-img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg" alt="" /></a></div>
            <h3><a href="#">有标题</a></h3>
            <p class="f-toe">有内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述</p>
        </li>
    </ul>
</div>
<div class="m-list4">
    <ul class="f-cb">
        <li>
            <div class="u-img"><a href="#"><img src="http://nec.netease.com/img/s/2.jpg" alt="" /></a></div>
            <h3><a href="#">有标题</a></h3>
        </li>
        <li>
            <div class="u-img"><a href="#"><img src="http://nec.netease.com/img/s/2.jpg" alt="" /></a></div>
            <h3><a href="#">有标题</a></h3>
        </li>
        <li>
            <div class="u-img"><a href="#"><img src="http://nec.netease.com/img/s/2.jpg" alt="" /></a></div>
            <h3><a href="#">有标题</a></h3>
        </li>
    </ul>
</div>
<div class="m-list4">
    <ul class="f-cb">
        <li>
            <div class="u-img2"><a href="#"><img src="http://www.qdxw.net/upload_file/2016061638172685.jpg" alt="" /></a></div>
        </li>
        <li>
            <div class="u-img2"><a href="#"><img src="http://www.qdxw.net/upload_file/2016061638172685.jpg" alt="" /></a></div>
        </li>
        <li>
            <div class="u-img2"><a href="#"><img src="http://www.qdxw.net/upload_file/2016061638172685.jpg" alt="" /></a></div>
        </li>
    </ul>
</div>

div+css上图下文图文列表CSS代码

/* 上图下文图文列表 */
.m-list4{padding:1px 0 0;zoom:1;}
.m-list4 ul{margin:-11px 0 0 -10px;}
.m-list4 li{display:inline;float:left;width:150px;margin:10px 0 0 10px;}
.m-list4 h3,.m-list4 p {width:100%;height:18px;overflow:hidden;margin:5px 0 0;line-height:18px;}
.m-list4 h3 a,.m-list4 h3 a:hover{color:#333;}
.m-list4 .u-img,.m-list4 .u-img2{width:auto;height:120px;}
/* 无边图片容器-默认定宽定高、图片拉伸 */
.u-img{display:block;position:relative;width:110px;height:110px;}
.u-img img{display:block;width:100%;height:100%;}
/* 图片高适应 */
.u-img-ha,.u-img-ha img{height:auto;}
/* 有边图片容器-默认定宽定高、图片拉伸 */
.u-img2{display:block;position:relative;width:104px;height:104px;padding:2px;border:1px solid #ddd;}
.u-img2 img{display:block;width:100%;height:100%;}
/* 图片高适应 */
.u-img2-ha,.u-img2-ha img{height:auto;}
/*清除浮动*/
.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
.f-cb,.f-cbli li{zoom:1;}

在线Demo预览

Tags：DIV+CSS HTML CSS