如何创建：等高列

学习如何使用 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