ul中的li布局CSS布局，横向垂直都要居中实现

 

 先把ul宽高用百分比；

接着把li浮动(不考虑pc端的话，inline-block也行)

li的宽高也百分比

a的宽高也百分比

最后里面的img宽高也百分比

 

就是一直从ul>li>a一层一层下来，每个子都是百分比尺寸相对父宽高

(我后面代码里还多个包含ul的div，是编辑器生成的模板基础上写的，你可以删掉那个div)

 

至于图片6个变成13个或57个的问题，总体图片数量不固定，每行数量又根据屏幕大小在变，一行两个图、三个图或更多，肯定有不能整除会落单的图片，那个你没有任何办法处理，只能让最后一行有空位，数学上不能整除，任何程序语言都无能为力的事情

 

再然后就是媒体查询：

屏幕宽超过你设定的界限时，li的百分比宽度小点，然一行能排三个或更多

屏幕宽小于你设定的界限时，把li百分比宽度设置到40-50%左右，一行只摆两个

1	<div class="wrapper">

1 2 3 4 5 6 7 8

<ul id="lists">   <li><a href="####"><img src="1.jpg" alt="" /></a></li>   <li><a href="####"><img src="1.jpg" alt="" /></a></li>   <li><a href="####"><img src="1.jpg" alt="" /></a></li>   <li><a href="####"><img src="1.jpg" alt="" /></a></li>   <li><a href="####"><img src="1.jpg" alt="" /></a></li>   <li><a href="####"><img src="1.jpg" alt="" /></a></li>  </ul>

1

</div>

 

1 2 3 4

body {  margin: 0;  padding: 0; }

1 2 3

@media screen and (min-width: 1px) and (max-width: 319px) { /*小于320x480的老式手机设备一般不用管了吧，上面有webkit内核浏览器的太少了，有ie9-10的基本上不存在*/ }

1	@media screen and (min-width: 320px) and (max-width: 480px) {

1 2 3 4 5 6 7 8 9

.wrapper  {   width: 100%;   height: 100%;   margin: 0 auto;   text-align: left;   border: 1px red solid;   background: #4A2C40;  }

1 2 3 4 5

#lists{   width: 100%;   height: 100%;   border: 1px green solid;  }

1 2 3 4 5 6 7 8 9

#lists li{   display: inline-block;   width: 40%;   height: 30%;   margin: 2%;   border: 1px #fff solid;   position: relative;   left: 10%;  }

1 2 3 4

#lists li img{   width: 100%;   height: 100%;  }

1 2 3 4 5 6

#lists li a{   width: 100%;   height: 100%;   display: block;   border: 1px red solid;  }

1

}

1	@media only screen and (min-width: 321px) and (max-width: 1024px) {

1 2 3 4 5 6 7 8 9

.wrapper  {   width: 100%;   height: 100%;   margin: 0 auto;   text-align: left;   border: 1px red solid;   background: #333;  }

1 2 3 4 5

#lists{   width: 100%;   height: 100%;   border: 1px green solid;  }

1 2 3 4 5 6 7 8 9

#lists li{   display: inline-block;   width: 40%;   height: 30%;   margin: 2%;   border: 1px #fff solid;   position: relative;   left: 4.7%;  }

1 2 3 4

#lists li img{   width: 100%;   height: 100%;  }

1 2 3 4 5 6

#lists li a{   width: 100%;   height: 100%;   display: block;   border: 1px red solid;  }

1

}

1

1	@media only screen and (min-width: 1029px){

1 2 3 4 5 6 7 8 9

.wrapper  {   width: 100%;   height: 100%;   margin: 0 auto;   text-align: left;   border: 1px red solid;   background: #14334D;  }

1 2 3 4 5

#lists{   width: 100%;   height: 100%;   border: 1px green solid;  }

1 2 3 4 5 6 7 8 9

#lists li{   display: inline-block;   width: 25%;   height: 30%;   margin: 2%;   border: 1px #fff solid;   position: relative;   left: 5.4%;  }

1 2 3 4

#lists li img{   width: 100%;   height: 100%;  }

1 2 3 4 5 6

#lists li a{   width: 100%;   height: 100%;   display: block;   border: 1px red solid;  }

1

}

 

另外：

1.li 的相对定位是为了让所有图片横向看上去相对居中(没办法绝对精确)，要绝对，参考：Z处

2.代码里面很多玩意100%了，再加1px边框理论上是不对的，只是写的时候方便看元素大小，要算尺寸应该-1px再算百分比

3.实际上我是在firefox上直接拉窗口大小测试的，实现了图片随屏幕大小缩放，窗口小于一定尺寸时一行三个图变切换为一行两个；但是大半夜了我也不敢去卧室翻平板和手机出来试，真机环境上估计可能上面的代码可能还得改改才能跑。而且估计webkit和ie9-10环境下估计细节还有错误需要兼容处理..

...