三种情况
注:先声明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结合
![img1](https://i-blog.csdnimg.cn/blog_migrate/68ca5b64d47bb25c2b7c31784d61750f.png)
![img2](https://i-blog.csdnimg.cn/blog_migrate/68ca5b64d47bb25c2b7c31784d61750f.png)
![img3](https://i-blog.csdnimg.cn/blog_migrate/68ca5b64d47bb25c2b7c31784d61750f.png)
![img4](https://i-blog.csdnimg.cn/blog_migrate/68ca5b64d47bb25c2b7c31784d61750f.png)
![img5](https://i-blog.csdnimg.cn/blog_migrate/68ca5b64d47bb25c2b7c31784d61750f.png)
![img6](https://i-blog.csdnimg.cn/blog_migrate/68ca5b64d47bb25c2b7c31784d61750f.png)
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
![img1](https://i-blog.csdnimg.cn/blog_migrate/b297df57ab58b72d5a2578f179ee8470.png)
![img2](https://i-blog.csdnimg.cn/blog_migrate/ac1a7d9fca45f2dabd9db00f9bab979b.png)
![img3](https://i-blog.csdnimg.cn/blog_migrate/68ca5b64d47bb25c2b7c31784d61750f.png)
![img4](https://i-blog.csdnimg.cn/blog_migrate/7013b8daff64e8cbe2bfaf4d7b0a90cc.png)
![img5](https://i-blog.csdnimg.cn/blog_migrate/b97917d39c83a72a51c967ec2bb6b89f.png)
![img6](https://i-blog.csdnimg.cn/blog_migrate/ac1a7d9fca45f2dabd9db00f9bab979b.png)
html code
<div id="demo5" class="demo democase3 clearfix"> <div class="item-list"><img alt="img1" src="http://placehold.it/100x140/e3e3e3/00c5e3&text=demo"></div><div class="item-list"><img alt="img2" src="http://placehold.it/100x120/e3e3e3/00c5e3&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&text=demo"></div><div class="item-list"><img alt="img5" src="http://placehold.it/100x130/e3e3e3/00c5e3&text=demo"></div><div class="item-list"><img alt="img6" src="http://placehold.it/100x120/e3e3e3/00c5e3&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
![img1](https://i-blog.csdnimg.cn/blog_migrate/b297df57ab58b72d5a2578f179ee8470.png)
![img2](https://i-blog.csdnimg.cn/blog_migrate/ac1a7d9fca45f2dabd9db00f9bab979b.png)
![img3](https://i-blog.csdnimg.cn/blog_migrate/68ca5b64d47bb25c2b7c31784d61750f.png)
![img4](https://i-blog.csdnimg.cn/blog_migrate/7013b8daff64e8cbe2bfaf4d7b0a90cc.png)
![img5](https://i-blog.csdnimg.cn/blog_migrate/b97917d39c83a72a51c967ec2bb6b89f.png)
![img6](https://i-blog.csdnimg.cn/blog_migrate/ac1a7d9fca45f2dabd9db00f9bab979b.png)
html code
<div id="demo6" class="demo democase3 clearfix"> <div class="item-list"><img alt="img1" src="http://placehold.it/100x140/e3e3e3/00c5e3&text=demo"></div> <div class="item-list"><img alt="img2" src="http://placehold.it/100x120/e3e3e3/00c5e3&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&text=demo"></div> <div class="item-list"><img alt="img5" src="http://placehold.it/100x130/e3e3e3/00c5e3&text=demo"></div> <div class="item-list"><img alt="img6" src="http://placehold.it/100x120/e3e3e3/00c5e3&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