네 열 레이아웃을 어떻게 만드는가
CSS를 사용하여 네 열 레이아웃 그리드를 만들어 보는 방법을 배웁니다.
네 열 레이아웃을 어떻게 만드는가
第一步 - HTML 추가:
<div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
第二步 - CSS 추가:
이 예제에서는 네 열 레이아웃을 생성하겠습니다
예제
.column {
float: left;
width: 25%;
}
/* 열 뒤의 float을 제거합니다 */
.row:after {
content: "";
display: table;
clear: both;
}
이 예제에서는 다음과 같은 것을 생성하겠습니다반응형네 열 레이아웃:
예제
/* 반응형 레이아웃 - 스크린 너비가 600px 미만일 때, 세 열을 가로로 배치하지 않고 쌓아 올립니다 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
相关页面
教程：CSS 网站布局
教程：CSS 响应式网页设计
