怎么实现多列的响应式布局？

Question

就是这种，不过其中的红色元素是根据父元素自适应的，每一行的第一个和最后一个元素紧贴父元素，这种应该怎么写，我现在用的css3的flex属性写的，感觉会有兼容问题，大家有更好的方法吗

Answer 1

提供两个解决方案:

方法1: 使用:nth-child选择器实现.(兼容IE9+)

<!-- html --><div class="adv">  <ul>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>  </ul></div>

/* css */*{  margin:0;  padding: 0;}.adv{  width: 920px;  height:620px;  background: green;}.adv ul li{  width: 300px;  height: 200px;  float: left;  margin-right: 10px;  margin-bottom: 10px;  background: blue;  list-style: none;}.adv ul li:nth-child(3n){  margin-right: 0;}.adv ul li:nth-child(n+7){  margin-bottom: 0;}

效果图如下:

方法2: 原理更方法1一样.(兼容IE6+)

<!-- html --><div class="adv">  <ul>    <li></li>    <li></li>    <li class="no-mr"></li>    <li></li>    <li></li>    <li class="no-mr"></li>    <li></li>    <li></li>    <li class="no-mr no-mb"></li>  </ul></div>

/* css */*{  margin:0;  padding: 0;}.adv{  width: 920px;  height:620px;  background: green;}.adv ul li{  width: 300px;  height: 200px;  float: left;  margin-right: 10px;  margin-bottom: 10px;  background: blue;  list-style: none;}.no-mr{  margin-right: 0 !important;}.no-mb{  margin-bottom: 0 !important;}

效果图同上.

望采纳,Thx!