用css换行

我有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-c、child-d、child-e的css是什么，以便它们显示在child-a、child-b、child-c下方，而不是在同一行上

---

我的完整代码：

您忘记了类的点：

.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”的左边不能有浮动元素。

您忘记了类的点：

.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”的左边不能有一个浮动元素。

更好的方法是这样

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

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

---

这就是按你的要求去做，前3行，后3行，依此类推。有效地忽略了一些浏览器的兼容性问题。

更好的方法就是这样

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

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

---

这是按照你的要求做的。第一行3个，然后第二行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或
  溢出：自动（“拉”里面的子内容）

• 不同的浏览器可能会有不同的反应。例如，对于IE，您需要

  width:32.5%例如，因为它的工作原理有点不同。希望能有帮助

---

我得到的是，你想要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或
  溢出：自动（“拉”里面的子内容）

• 不同的浏览器可能会有不同的反应。例如，对于IE，您需要

  width:32.5%例如，因为它的工作原理有点不同。希望能有帮助

---

给父类指定一定的宽度。注意

宽度：100%显示：内联相互取消-您缺少一个
，所以两者都不起作用。幸运的是，
float:left隐藏此问题。想想你在做什么-你真的需要这里的
float
？你能按照Thilakar的建议给孩子们和家长们宽度吗？（例如，
50px
/
160px
将保持3在一行）为父类指定一定的宽度相互取消-您缺少一个
，所以两者都不起作用。幸运的是，
float:left隐藏此问题。想想你在做什么-你真的需要这里的
float
？你能按照Thilakar的建议给孩子们和家长们宽度吗？（例如，
50px
/
160px
将保留3个字符）也许你可以帮我看一下确切的代码。也许你能帮我查一下准确的密码。这也很有效。与上面的答案基本相同。谢谢这也很有效。与上面的答案基本相同。谢谢这也奏效了。但对他们来说内容更丰富的女主角看起来并没有那么好。也许如果所有的演员都有很多或一些内容，这将是最好的。但是div各不相同，所以它看起来有点奇怪，有些线条环绕着，有些则没有。谢谢这也起作用了。但对他们来说内容更丰富的女主角看起来并没有那么好。也许如果所有的演员都有很多或一些内容，这将是最好的。但是div各不相同，所以它看起来有点奇怪，有些线条环绕着，有些则没有。谢谢