如何 - 等高
了解如何使用 CSS 创建等高列。
如何创建等高列
当您有需要并排显示的列时，您通常会希望它们具有相同的高度（与最长的列高度匹配）。
问题
期望
步骤 1) 添加 HTML
示例
<div class="col-container">
<div class="col">
<h2>列 1</h2>
<p>Hello World</p>
</div>
<div class="col">
<h2>列 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</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; /* 使容器内的元素表现得像表格单元格 */
}
自己动手试一试 »
响应式等高
我们在上一个示例中创建的列是响应式的（如果您在“尝试一下”示例中调整浏览器窗口大小，您会看到它们会自动调整到所需的大小和高度）。但是，对于小屏幕（如智能手机），您可能希望它们垂直堆叠而不是水平排列。
在中型和大型屏幕上
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 教程 中阅读有关弹性盒子的更多信息。
