CSS 多行显示:table-cell形式（等高列，多行）

在本文中，我们将介绍如何使用CSS的display: table-cell属性来实现多行显示（等高列，多行）的效果。

阅读更多：CSS 教程

什么是display: table-cell？

在CSS中，display: table-cell是一种用于布局的属性，它模拟了HTML中的表格单元格。通过将元素的display属性设置为table-cell，我们可以将元素呈现为表格的单元格，实现一些类似于表格的布局效果。

实现等高列

为了实现等高列的效果，我们可以将父级元素的display属性设置为table，将子级元素的display属性设置为table-cell。

例如，我们有一个父级元素div，其中包含了三个子级元素div。现在，我们希望这三个子级元素呈现为等高列。

<div class="container">
  <div class="col">这是第一列</div>
  <div class="col">这是第二列</div>
  <div class="col">这是第三列</div>
</div>

通过设置CSS样式如下：

.container {
  display: table;
}

.col {
  display: table-cell;
}

这样，我们就实现了等高列的效果。即使每个子级元素的内容长度不同，它们的高度仍然会相等。

实现多行

除了实现等高列之外，我们还可以使用display: table-cell属性来实现多行的效果。这种方法适用于当我们希望将一行内容分成多行展示时使用。

例如，我们有一个父级元素div，其中包含了六个子级元素div。现在，我们希望每行显示三个子级元素，当内容超过三个时，没有足够的空间展示时自动换行。

<div class="container">
  <div class="col">这是第一列</div>
  <div class="col">这是第二列</div>
  <div class="col">这是第三列</div>
  <div class="col">这是第四列</div>
  <div class="col">这是第五列</div>
  <div class="col">这是第六列</div>
</div>

通过设置CSS样式如下：

.container {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.col {
  display: table-cell;
  width: 33.33%;
  border: 1px solid #ccc;
}

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

在上面的代码中，我们将父级元素的宽度设置为100%，这样每行将会占满整个父级容器的宽度。为了让子级元素平均分布，我们将每个子级元素的宽度设置为33.33%（100%除以3），并设置边框为1px的灰色。

同时，我们使用了:nth-child(3n+1)选择器来清除每行的第一个子级元素左浮动。这样，每行将会显示三个子级元素，并在达到一行的最大容量后自动换行。

实现等高列和多行的结合应用

可以通过组合使用等高列和多行的方法，实现同时具备等高列和多行效果的布局。

例如，我们有一个父级元素div，其中包含了九个子级元素div。现在，我们希望每行显示三个子级元素，保持每列高度相等。

<div class="container">
  <div class="col">这是第一列</div>
  <div class="col">这是第二列</div>
  <div class="col">这是第三列</div>
  <div class="col">这是第四列</div>
  <div class="col">这是第五列</div>
  <div class="col">这是第六列</div>
  <div class="col">这是第七列</div>
  <div class="col">这是第八列</div>
  <div class="col">这是第九列</div>
</div>

通过设置CSS样式如下：

.container {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.col {
  display: table-cell;
  width: 33.33%;
  border: 1px solid #ccc;
}

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

通过上述代码，我们既实现了每行显示三个子级元素，又保持了每列高度相等的效果。

总结

通过使用CSS的display: table-cell属性，我们可以实现多行显示（等高列，多行）的效果。我们可以将父级元素的display属性设置为table，将子级元素的display属性设置为table-cell，来实现等高列。同时，我们可以使用辅助样式和选择器来实现多行显示的效果。这种布局方法既简单又实用，适用于各种需要多行展示内容的场景。希望本文对你理解和应用CSS的display: table-cell属性有所帮助！