用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;
 }

对于child-c，child-d，child-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; }

第三行之后的每个元素都会转到下一行。 Demo

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

Answer 2

你忘记了课程的点数：

.child-a, .child-b, .child-c,
.child-d, .child-e, .child-f,
.child-g, .child-h, .child-i {
    padding: 0 2% 0 0;
    width:100%
    display: inline;
    float: left;
}

.child-d { clear: left; }
.child-g { clear: left; }

这样就可以使'd'和'g'左边没有浮动元素。

Answer 3

我得到的是你想要一个顶行的3个div，然后是第二行的3个div，然后是最后一行的最后两个div。如果这是正确的，你不需要7个ID。而是使用一个类。

.child_div {
    width: 33%;
    height: 50px; /* for beautification */
    float: left;
}

所有儿童div必须使用此课程。 div将自动并排排列。

可能出现的几个问题：

• 父div的高度为0，因为它的所有子div都是浮动的。要解决此问题，您可以设置父div的高度（不响应内容长度），或设置overflow:hidden;或overflow:auto;（“拉”内部的子内容）
• 不同的浏览器可能会有不同的反应。例如，对于IE，您需要width:32.5%;，例如因为它有点不同。希望它有所帮助。