NEC学习 ---- 模块 - 左图右文图文列表

该模块效果图:

这个模块也是在开发中经常使用的一种:

HTML代码:

<div class="container">
    <div class="m-list3 m-list3-x"><!-- 这里的 m-list3-x 是什么类呢, 我们下面来揭晓! -->
        <ul class="f-cb">
            <li>
                <div class="u-img"><a href="#"><img width="100" height="100" src="http://lorempixel.com/100/100/transport/1/Text1/" alt="" /></a></div>
                <div class="txt">
                    <h3><a href="#">标题1</a></h3>
                    <p>内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述</p>
                </div>
            </li>
            <li>
                <div class="u-img"><a href="#"><img width="100" height="100" src="http://lorempixel.com/100/100/transport/2/Text2/" alt="" /></a></div>
                <div class="txt">
                    <h3><a href="#">标题2</a></h3>
                    <p>内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述</p>
                </div>
            </li>
            <li>
                <div class="u-img"><a href="#"><img width="100" height="100" src="http://lorempixel.com/100/100/transport/3/Text3/" alt="" /></a></div>
                <div class="txt">
                    <h3><a href="#">标题3</a></h3>
                    <p>内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述</p>
                </div>
            </li>
        </ul>
    </div>
</div>

CSS代码:

<style type="text/css">
　　.container{
　　　　color:#777;
　　　　width:90%;
　　　　margin:45px auto;
　　}
　　.m-list3 {
　　　　padding:1px 0 0 0;
　　　　zoom:1;
　　　　overflow:hidden;
　　　　color:#777;
　　}
　　.m-list3 ul {
　　　　margin:-11px 0 0 0;//margin中的top值是11的由来是, li中margin-top是10px, 加上父元素.m-list3 的padding-top:1px; 正好是 top方向是11px;
　　}
　　.m-list3 li {
　　　　display:inline;//为什么是inline呢, 其实这里是为了方便我们调整横向, 如下一个例子中的示例图效果.
　　　　float:left;//li 左浮动,配合下面的 width: 100%; 让li单独为一行.
　　　　margin-top:10px;
　　　　width:100%;
　　}

　　.m-list3 .u-img {/*图片的容器*/
　　　　float:left;//做浮动, 并且确定该图片容器的宽和高, 一般这种模块中的图片都是定高, 定宽的, 所以容器一定有宽和高.
　　　　width:100px;
　　　　height:100px;
　　}
　　.m-list3 .txt {/*文本容器*/

　　　　float:right;//float和图片容器相反, 配合width:100%, 这时会让文本在图片之下, 让该容器的margin-left(即是图片位置,且为图片宽度):100px;使之和图片在一行
　　　　width:100%;
　　　　height:95px;//给文本确定高,这里根据实际确定,有可能也不需要.
　　　　overflow:hidden;
　　　　margin-left:-100px;
　　　　position:relative;//相对定位,配合下面的z-index:-1, 需要图片显示在上, 可以点击图片到指定链接位置
　　　　z-index:-1;
　　}
　　.m-list3 h3, .m-list3 p{/*之后的代码是处理文本中的标题和内容*/
　　　　margin-left:110px;
　　　　overflow:hidden;
　　　　line-height:18px;
　　}
　　.m-list3 h3 {
　　　　margin-bottom:5px;
　　}
　　.m-list3 h3 a:hover{
　　　　text-decoration:underline;
　　}
</style>

这里应用的方式和文章 和 文章 "NEC学习 ---- 布局 -两列， 左侧定宽，右侧自适应" 是一样的, 可以参考!

而有时候, 我们的需求可能是这种, 如下图:

这种情况也很常见, 那么怎么实现呢? 

其实只需要对上面的代码进行稍微的添加就可了.

首先我们找到类.m-list3 会发现有2个类, 多的一个类似.m-list3-x, 我们用这个类来控制横向

我们增加的css代码是:

/*横排*/
 .m-list3-x li {
    margin:10px 0 0 10px;
    width:230px;//这里确定每个列表的宽度,根据具体环境决定
}
.m-list3-x ul{
    margin:-11px 0 0 -10px;//间隙根据具体情况决定
}

NEC的布局和模块真的很方便重新认识自己HTML和CSS的代码设计, 这些学习我相信对后台开发同样重要.