如何创建：等高列

学习如何使用 CSS 创建等高列。

如何创建等高列

当您的列应并排显示时，您通常会希望它们具有相同的高度（与最高的高度匹配）。

亲自试一试

第一步 - 添加 HTML：

<div class="col-container">
  <div class="col">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>

  <div class="col">
    <h2>Column 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>

  <div class="col">
    <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>
</div>

第二步 - 添加 CSS：

.col-container {
  display: table; /* 使容器元素表现得像表格 */
  width: 100%; /* 设置为全宽以扩展整个页面  */
}

.col {
  display: table-cell; /* 使容器内的元素表现得像表格单元格 */
}

亲自试一试

响应式等高

我们在上一个例子中创建的列是响应式的（如果您在尝试的例子中调整浏览器窗口的大小，您将看到它们会自动调整到所需的宽度和高度）。但是，对于小屏幕（如智能手机），您可能希望它们垂直堆叠而不是水平并排：

为了实现这一点，请添加一个媒体查询，并为此指定一个断点像素值：

实例

/* 如果浏览器窗口小于 600px，则使列堆叠 */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

亲自试一试

使用 Flexbox 实现等高和等宽

您还可以使用 Flexbox 创建等高框：

实例

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

亲自试一试

注意：Internet Explorer 10 及更早版本不支持 Flexbox。

相关页面

教程：CSS Flexbox