如何創建：等高列

學習如何使用 CSS 創建等高列。

如何創建等高列

當您的列應并排顯示時，您通常會希望它們具有相同的高度（與最高的高度匹配）。

親自試一試

第一步 - 添加 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>

第二步 - 添加 CSS：

.col-container {
  display: table; /* 使容器元素表現得像表格 */
  width: 100%; /* 設置為全寬以擴展整個頁面  */
}
.col {
  display: table-cell; /* 使容器內的元素表現得像表格單元格 */
}

親自試一試

響應式等高

我們在上一個例子中創建的列是響應式的（如果您在嘗試的例子中調整瀏覽器窗口的大小，您將看到它們會自動調整到所需的寬度和高度）。但是，對于小屏幕（如智能手機），您可能希望它們垂直堆疊而不是水平并排：

為了實現這一點，請添加一個媒體查詢，并為此指定一個斷點像素值：

實例

/* 如果瀏覽器窗口小于 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;
}

親自試一試

注意：Internet Explorer 10 及更早版本不支持 Flexbox。

相關頁面

教程：CSS Flexbox