如何创建 - 等高的列
了解如何使用 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 创建等高的盒子:
注释: Internet Explorer 10 及更早版本不支持 Flexbox。
提示:在我们的 CSS Flexbox 教程中了解更多关于弹性盒子的信息。
