如何 - 等高

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

如何创建等高列

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

问题：

欲望：

亲自试一试 »

步骤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; /* Make the container element behave like a table */
  width: 100%; /* Set full-width to expand the whole page */
}

.col {
  display: table-cell; /* Make elements inside the container behave like table cells */
}

亲自试一试 »

响应式等高

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

在中型和大屏幕上：

你好世界。

在小屏幕上：

你好世界。

要实现此目的，请添加媒体查询并指定何时发生这种情况的断点像素值：

示例

/* If the browser window is smaller than 600px, make the columns stack on top of each other */
@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 教程。