Question

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

我得到这样的输出

我需要像这样的输出。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我也喜欢这个。你可以在这里看到：JSFiddle

＆＃13;

getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);

＆＃13;

* {
  box-sizing: border-box;
}
.table .row {
  display: flex;
  flex-wrap: wrap;
  list-style:none
}

.table .row li {
  background: orange;
  width: 33%;
  text-align: center;
  line-height: 100px;
  border: 5px solid white;
}

.table + .table li {
  background: olive;
}

＆＃13;

Answer 2

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

更新：

我仍然认为你应该考虑使用不同的布局方法（例如flexbox） - 但是如果你想使用带有可变宽度单元格的CSS表格布局，你可能想要实际使用table而不是模拟一个，并使用colspan属性。请注意，这是非常古老的学校，很难被认为对实际布局有用。如果您要显示表格数据，那很好，但如果您要布置更复杂的内容，请查看弹性框（已提供适用于您的答案）或CSS网格或网格框架比如Ungrid。

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

＆＃13;

table {
  border-collapse: separate;
  border-spacing: 30px 30px;
  width: 100%;
  table-layout: fixed;
}


td {
  padding:5px;
  background-color: gold;
  text-align: center;
}

＆＃13;

<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>

＆＃13;

Answer 3

这可以使用css网格轻松实现。您可以在包装器div中添加尽可能多的元素。而且，它会有回应。

＆＃13;

body{
  margin:20px;
}
.wrapper{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:100px;
  grid-gap:5px;
}
.wrapper > div{
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  background:#FF8966;
}

＆＃13;

<div class="wrapper">
    <div>Cell 1</div>
    <div>Cell 2</div>
    <div>Cell 3</div>
    <div>Cell 4</div>
    <div>Cell 5</div>
    <div>Cell 6</div>
</div>

＆＃13;

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

3 个答案: