使用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-a、child-b、child-c下面，而不是在同一行上，那么child-c、child-d、child-e的css是什么？

我的完整代码：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都必须使用这个类。divs会自动并排对齐。

可能会出现以下几个问题：

• 父div的高度将为0，因为它的所有子div都是浮点型的。要解决这个问题，您可以设置父inside)
• Different的高度(不响应内容长度)，或者设置overflow:hidden;或overflow:auto; (“拉”出子内容div浏览器的反应可能略有不同。例如，对于IE，您需要width:32.5%;，因为它的工作方式略有不同。希望能有所帮助。