쌓여진 테이블을 생성하는 방법

쌓여진 테이블을 가로로 배치하는 방법

CSS를 사용하여 어떻게 사용하는지 float 쌓여진 테이블을 생성하는 속성:

예제

* {
  box-sizing: border-box;
}
/* 두 열 레이아웃을 생성합니다 */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}
/* Clearfix(浮动 제거) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

본인이 직접 시도해 보세요

CSS를 사용하여 어떻게 사용하는지 flex 쌓여진 테이블을 생성하는 속성:

예제

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 5px;
}

본인이 직접 시도해 보세요

주의:Flexbox는 Internet Explorer 10 및 이전 버전에서 지원되지 않습니다. 사용하시겠습니까? float 또는 flex 귀하의 선택에 따릅니다. 그러나 IE10 및 이하 버전을 지원해야 한다면 다음을 사용해야 합니다: float.

팁:Flexible Box 레이아웃 모듈에 대한更多信息을 알고 싶다면 우리의 CSS Flexbox 교육.

반응성 추가

위의 예제는 모바일 장치에서 두 열이 페이지에 너무 많은 공간을 차지하기 때문에 미관적으로 보일 수 있습니다.

반응형 테이블을 만들기 위해 두 열 레이아웃에서 모바일 장치의 전체 너비 레이아웃으로 전환하려면 다음 미디어 쿼리를 추가하세요:

예제

/* 반응형 레이아웃 - 600픽셀 미만의 화면에서 두 열을 가로로 배치하여 병렬로 배치하지 않습니다 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

본인이 직접 시도해 보세요

관련 페이지

강의:CSS 테이블

강의:CSS 풍선

강의:CSS Flexbox