等高的列

---

了解如何使用 CSS 创建等高的列。

---

如何创建等高的列

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

The Problem:

The Desire:

亲自试一试 »

---

步骤 1) 添加 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>

步骤 2) 添加 CSS:

实例

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

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

---

---

响应式等高

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

在中大屏幕上:

Hello World.

Hello World.

Hello World.

Hello World.

Hello World.

在小屏幕上:

Hello World.

Hello World.

Hello World.

Hello World.

Hello World.

要实现这一点，请添加一个媒体查询并指定一个断点像素值用于何时发生这种情况:

实例

/* 如果浏览器窗口小于 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 教程中了解更多关于弹性盒子的信息。