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

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

这是按照您的要求进行的前 3 个一行，然后是下 3 个，然后尽管存在一些浏览器兼容性问题，但仍然有效。

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%; 因为它的工作方式有点不同。希望有帮助。