세 열 레이아웃을 어떻게 만드는가
CSS를 사용하여 세 열 레이아웃 그리드를 만들어 보는 방법을 배웁니다.
세 열 레이아웃을 어떻게 만드는가
第一步 - HTML 추가:
<div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
第二步 - CSS 추가:
이 예제에서 우리는 세 개의일치 크기의 열:
예제
.column {
float: left;
width: 33.33%;
}
/* 열 뒤의 float을 제거합니다 */
.row:after {
content: "";
display: table;
clear: both;
}
이 예제에서 우리는 세 개의불일치 크기의 열:
예제
.column {
float: left;
}
.left, .right {
width: 25%;
}
.middle {
width: 50%;
}
이 예제에서 우리는 다음과 같은 것을 만들어 볼 것입니다:반응형세 열 레이아웃:
예제
/* 반응형 레이아웃 - 스크린 너비가 600px 미만이면 세 열을 쌓아놓고 가로로 배치하지 않습니다 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
