如何 - 等高
了解如何使用 CSS 创建等高的列。
如何创建等高列
当您拥有应该并排显示的列时，您通常希望它们具有相同的 高度（与最高的列匹配）。
问题
愿望
步骤 1) 添加 HTML
示例
<div class="col-container">
<div class="col">
<h2>列 1</h2>
<p>你好，世界</p>
</div>
<div class="col">
<h2>列 2</h2>
<p>你好，世界！</p>
<p>你好，世界！</p>
<p>你好，世界！</p>
<p>你好，世界！</p>
</div>
<div class="col">
<h2>列 3</h2>
<p>其他一些文本..</p>
<p>其他一些文本..</p>
</div>
</div>
步骤 2) 添加 CSS
示例
.col-container {
display: table; /* 使容器元素像表格一样工作 */
width: 100%; /* 设置全宽以扩展整个页面 */
}
.col {
display: table-cell; /* 使容器内的元素像表格单元格一样工作 */
}
自己尝试 »
响应式等高
我们在上一个示例中创建的列是响应式的（如果在试用示例中调整浏览器窗口的大小，您将看到它们会自动调整到必要的宽度和高度）。但是，对于小屏幕（例如智能手机），您可能希望它们垂直堆叠而不是水平堆叠。
在中等和大型屏幕上
你好，世界。
你好，世界。
你好，世界。
你好，世界。
你好，世界。
在小屏幕上
你好，世界。
你好，世界。
你好，世界。
你好，世界。
你好，世界。
要实现这一点，请添加媒体查询并指定此操作应发生的断点像素值。
示例
/* 如果浏览器窗口小于 600 像素，则使列彼此堆叠 */
@media only screen and (max-width: 600px) {
.col {
display: block;
width: 100%;
}
}
自己尝试 »
使用 Flexbox 实现等高和等宽
你也可以使用 Flexbox 创建等高盒子
注意： Flexbox 在 Internet Explorer 10 及更早版本中不受支持。
提示： 在我们的 CSS Flexbox 教程 中了解更多关于弹性盒的信息。
