如何创建：等高列
学习如何使用 CSS 创建等高列。
如何创建等高列
当您的列应并排显示时，您通常会希望它们具有相同的高度（与最高的高度匹配）。
问题：
愿望：
第一步 - 添加 HTML：
Column 1
Hello World
Column 2
Hello World!
Hello World!
Hello World!
Hello World!
Column 3
Some other text..
Some other text..
第二步 - 添加 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 ເພື່ອສ້າງຖັງທີ່ສູງດຽວກັນ:
ຄວາມນັບບັນຍັດ
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
ຫັງໃສ່:ບໍ່ມີການສະໜັບສະໜູນ Flexbox ໃນລະບົບ Internet Explorer 10 ແລະເກົ່າກ່ວາ.
相关页面
教程：CSS Flexbox
