超全css解决方案之项目列表解决方案

浏览数：44 / 时间：2015年06月09日

三种情况

技术分享

注：先声明ie7下有个变态的bug，就是浮动元素的margin-bottom不能正确解析已经闭合浮动的父元素的高度（使用clearfix或者 overflow等方法闭合浮动），而ie6是好的，所以可以按照设计灵活使用margin-top或者给父元素针对ie7打padding- bottom的bug，以下的实例demo1,2,3,4,6在ie7下测试均有这个问题，大家可以看到，我这没有处理。

//图片又乱了

边缘左右没有间隔

这种情况可以用4种方法来解决1、负margin 2、overflow:hidden 3、css3选择器（ie7+） 4、jquery

html code

<div id="demo1" class="demo democase1">
    <ul class="nostyle clearfix">
       <li><img alt="img1" src="images/img100.jpg"></li>
       <li><img alt="img2" src="images/img100.jpg"></li>
       <li><img alt="img3" src="images/img100.jpg"></li>
       <li><img alt="img4" src="images/img100.jpg"></li>
       <li><img alt="img5" src="images/img100.jpg"></li>
       <li><img alt="img6" src="images/img100.jpg"></li>   
    </ul>
</div>

css code

/* democase 1 public css */
.demo{
    width:340px;
    background-color:#D7D7D7;    
}
.democase1 ul{
    padding:20px 0 0 0;
}
.democase1 li{
    float:left;
    display:inline;
    margin:0 20px 20px 0; 
}
.democase1 li img{
    vertical-align:middle;
}

demo 1 负margin

css code

/* 负margin核心部分 */
#demo1 ul{
    margin:0 -20px 0 0;
}

注：在这里千万别设置ul的width，因为如果没有设置width的负margin相当于增加了其width，而如果设置了width，那么负margin将不会增加宽度，这个方法就是个失败的案例

demo 2 overflow:hidden + width

css code

/* overflow:hidden核心部分 */
#demo2{
    overflow:hidden;
}
#demo2 ul{
    width:360px;
    margin:0;
}

注：这里ul的宽度其实是超过了其父元素的宽度，用来装其子元素的margin，然后对其父元素设置超过宽度隐藏，反正隐藏的那部分是li的margin部分，所以这种方法也是个很好的方法，但是千万要注意设置的宽度应该是它默认的100%宽度加上其子元素的margin值

demo 3 css3选择器（ie7+）

css code

/* css3选择器核心部分 */
#demo3 ul{
    margin:0;
}
#demo3 li:nth-child(3n+3){
    margin-right:0;
}

最后还有一种jquery方法，其实跟第三种方法差不多，也就是通过jquery可以支持ie6浏览器。既然能够用css解决，为什么要用jquery呢，所以在此不做详细说明，如果真想学习这个jquery方法，请参看下面的更多资料

上下左右间隔相等

这个情况主要有三种方法来解决1、用列表的margin和父元素的padding结合 2、css3选择器（ie7+） 3、jquery

html code

<div id="demo4" class="demo democase2 clearfix">
   <div class="item-list"><img alt="img1" src="images/img100.jpg"></div>
   <div class="item-list"><img alt="img2" src="images/img100.jpg"></div>
   <div class="item-list"><img alt="img3" src="images/img100.jpg"></div>
   <div class="item-list"><img alt="img4" src="images/img100.jpg"></div>
   <div class="item-list"><img alt="img5" src="images/img100.jpg"></div>
   <div class="item-list"><img alt="img6" src="images/img100.jpg"></div>
</div>

css code

/* democase 2 public css */
.demo{
    width:340px;
    background-color:#D7D7D7;    
}
.democase2 .item-list{
    float:left;
    display:inline;
}
.democase2 .item-list img{
    vertical-align:bottom;
}

demo 4 列表项的margin和父元素的padding结合

css code

/* 列表项的margin和父元素的padding结合核心代码 */
#demo4 .item-list{
    margin:0 0 10px 10px;
}
#demo4{
    padding:10px 10px 0 0;
    width:330px;
}

注：这个方法主要就是父元素的margin和子元素的padding结合运用，我们会发现如果这两个结合起来，刚好凑成了上下左右的值，当然不是所有的组合都可以的哦，自己动手试试吧。至于css3选择器和jquery方法其实和上面的都差不多，都是通过高级选择器来设置特定的margin为0，所以在这不详细介绍了，提出来给大家一个思路，感兴趣的话可以自己动手

等高

这种情况可以用jquery或定死高度或inline-block来解决，对于定死高度就不太适合动态生成的列表项了，尤其是你根本就不知道最大的那个列表项的高度是多少，定死高度也比较简单，在这不做介绍

css code

/*democase 3 public css*/
.democase3{
    padding:10px 10px 0 0;
    width:330px;
}
.democase3 .item-list{
    margin:0 0 10px 10px;
}

demo 5 inline-block

html code

<div id="demo5" class="demo democase3 clearfix">
   <div class="item-list"><img alt="img1" src="http://placehold.it/100x140/e3e3e3/00c5e3&amp;text=demo"></div><div class="item-list"><img alt="img2" src="http://placehold.it/100x120/e3e3e3/00c5e3&amp;text=demo"></div><div class="item-list"><img alt="img3" src="images/img100.jpg"></div><div class="item-list"><img alt="img4" src="http://placehold.it/100x110/e3e3e3/00c5e3&amp;text=demo"></div><div class="item-list"><img alt="img5" src="http://placehold.it/100x130/e3e3e3/00c5e3&amp;text=demo"></div><div class="item-list"><img alt="img6" src="http://placehold.it/100x120/e3e3e3/00c5e3&amp;text=demo"></div>
</div>

css code

#demo5 .item-list{
    display:inline-block;*display:inline;*zoom:1;
    vertical-align:top;
}

注：使用inline-block请注意列表项的html标签千万不能断行，不然就会产生额外的距离，而且各个浏览器表现不一样，到目前为止还没有很好的解决方法（有一个设置font-face为0的方法，但是还是兼容不太好，对于要求严格布局来说，还不能达到满意的），最好的方法就是标签一个接一个写不断行，所以上面的html代码部分看起来是比较糟糕的，可读性比较差。当然在这里还应该注意要设置vertical-align为top

demo 6 jquery

html code

<div id="demo6" class="demo democase3 clearfix">
   <div class="item-list"><img alt="img1" src="http://placehold.it/100x140/e3e3e3/00c5e3&amp;text=demo"></div>
   <div class="item-list"><img alt="img2" src="http://placehold.it/100x120/e3e3e3/00c5e3&amp;text=demo"></div>
   <div class="item-list"><img alt="img3" src="images/img100.jpg"></div>
   <div class="item-list"><img alt="img4" src="http://placehold.it/100x110/e3e3e3/00c5e3&amp;text=demo"></div>
   <div class="item-list"><img alt="img5" src="http://placehold.it/100x130/e3e3e3/00c5e3&amp;text=demo"></div>
   <div class="item-list"><img alt="img6" src="http://placehold.it/100x120/e3e3e3/00c5e3&amp;text=demo"></div>
</div>

css code

#demo6 .item-list{
    float:left;
    display:inline;
}

js code

function setEqualHeight(columns){
    var tallestcolumn = 0;
    columns.each(function(){
        currentHeight = $(this).height();
        if(currentHeight > tallestcolumn){
            tallestcolumn  = currentHeight;
        }
    });
    columns.height(tallestcolumn);
}
$(document).ready(function() {
    setEqualHeight($("#demo6 .item-list"));
});

注：这里的思路就是先设置最大高度为0，然后循环各个列表项的高度，如果列表项的高度大于最大高度，就给最大高度赋值为这个列表项的高度，最后设置列表项的高度为得到的最大高度。这里还有个jquery插件：equalheights-jquery-plugin

总：项目列表其用途还是非常广的，里面包含的知识点也是非常多的，如清除浮动，超过宽度省略号显示，inline-block，float等，同一个效果也可以用多种方法实现，而不同的方法代码量自然不一样，可以根据具体项目来灵活变通

原文来之www.w3cplus.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

超全css解决方案之项目列表解决方案