如何强制列显示在下一行？

Question

我有超过五到六列它将来会增加.我必须用三列显示每一行.那么如何强制列显示在下一行？我设置父类display: table和子类,display:table-cell因为我必须显示列的相等高度.

我得到这样的输出

我需要像这样的输出.

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 30px 0px;
  width: 100%;
}

.row { display:table-row;width: 100%; }

li{
  display:table-cell;
  padding:5px;
  background-color: gold;
  width: 33.33%;
  text-align: center;
}

<div class="table">
    <ul class="row">
        <li>Cell 1</li>
        <li>Cell 2</li>
        <li>Cell 3</li>
        <li>Cell 4</li>
        <li>Cell 5</li>
        <li>Cell 6</li>
    </ul>
</div>

Answer 1

不幸的是，您需要row在每组列周围添加一个包装器，而不使用不同的布局方法（例如 Flexbox）。

由于您已经有了 Flexbox 答案（请参阅@Shiva 的答案），因此这里有一个带有行包装器和table-layout: fixed;. 注意我还更改了您的ul和litodiv以删除一些应用于列表项的自动 CSS。

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 30px 30px;
  width: 100%;
  table-layout: fixed;
}

.row { display:table-row;width: 100%; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
  width: 33.33%;
  text-align: center;
}

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
        <div class="cell">Cell 3</div>
    </div>
    <div class="row">
        <div class="cell">Cell 4</div>
        <div class="cell">Cell 5</div>
        <div class="cell">Cell 6</div>
    </div>
</div>

更新：

我仍然认为您应该考虑一种不同的布局方法（例如 flexbox） - 但如果您想使用具有可变宽度单元格的 CSS 表格布局，您可能需要实际使用 a 而table不是模拟一个，并利用该colspan属性。请注意，这是非常老派的，几乎不应该被认为对实际布局有用。如果您要显示表格数据，那没问题，但如果您要布局更复杂的内容，请查看 flex box （已经提供了适合您的答案）或 CSS Grid 或像Ungrid这样的网格框架。

无论如何，这是一个表格布局：

table {
  border-collapse: separate;
  border-spacing: 30px 30px;
  width: 100%;
  table-layout: fixed;
}


td {
  padding:5px;
  background-color: gold;
  text-align: center;
}

<table>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td colspan="3">Cell 4</td>
    </tr>
  </tbody>
</table>