如何 - 等高
瞭解如何使用 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 教程 中閱讀有關彈性盒子的更多資訊。
