用css换行

Question

我连续有7个div,内容很少.我希望前3个是一行然后是下一个3,依此类推.

<div class="parent">
 <div class="child-a">abc</div>
 <div class="child-b">def</div>
 <div class="child-c">ghi</div>
 <div class="child-d">jkl</div>
 <div class="child-e">mno</div>
 <div class="child-f">pqr</div>
 <div class="child-g">stu</div>
</div>

那我怎么能做这个呢？

对于我的第一行

.child-a, .child-b, .child-c {
  padding: 0 2% 0 0;
  width:100%
  display: inline;
  float: left;
 }

对于孩子-c,孩子-d,孩子-e,css会是什么样的,以便它们显示在child-a,child-b,child-c下面而不是同一行？

我的完整代码:http://jsfiddle.net/winchendonsprings/UfswL/11/

Answer 1

更好的方法就是这样.

.parent div { float: left; }
.parent div:nth-child(3n + 1) { clear: left; }

第三行之后的每个元素都将转到下一行.演示

这就是你所要求的the first 3 one a line then the next 3, and so on.有效地摒弃一些浏览器的兼容性问题.