CSS로 3열 레이아웃을 구현하는 네 가지 방법의 예

서문

사실 3열 레이아웃이든 2열 레이아웃이든 우리는 일상 프로젝트에서 자주 사용합니다. 세 개의 열이 무엇인지 모릅니다. 열 레이아웃 2열 레이아웃이 무엇인지 이미 사용하고 있습니까? 3열 레이아웃의 한두 가지 방법을 알고 있지만 실제 작업에서는 그 한 가지 방법에만 의존하게 될 것입니다. 이 기사에서는 3열 레이아웃을 4가지 방법으로 자세히 소개하고 사용 시나리오를 소개합니다.

3열 레이아웃은 페이지를 왼쪽, 가운데, 오른쪽의 세 부분으로 나눈 후 가운데 부분을 적용하는 레이아웃 방식을 말합니다.

1. 절대 위치 지정 방법

HTML 코드는 다음과 같습니다.

<p class="left">Left</p>
<p class="main">Main</p>
<p class="right">Right</p>

CSS 코드는 다음과 같습니다.

//简单的进行CSS reset
body,html{
    height:100%;
    padding: 0px;
    margin:0px;
}
//左右绝对定位
.left,.right{
    position: absolute;
    top:0px;
    background: red;
    height:100%;
}
.left{
    left:0;
    width:100px;
}
.right{
    right:0px;
    width:200px;
}
//中间使用margin空出左右元素所占据的空间
.main{
    margin:0px 200px 0px 100px;
    height:100%;
    background: blue;
}

이 방법에는 명백한 단점이 있습니다. 열에 최소 너비 제한이 포함되어 있거나 너비가 포함된 내부 요소의 경우 브라우저 너비가 어느 정도 작을 때 레이어 중복이 발생합니다.

2. 성배 레이아웃

HTML 코드는 다음과 같습니다.

//注意元素次序
<p class="main">Main</p>
<p class="left">Left</p>
<p class="right">Right</p>

CSS 코드는 다음과 같습니다.

//习惯性的CSS reset
body,html{
    height:100%;
    padding: 0;
    margin: 0
}
//父元素body空出左右栏位
body {
    padding-left: 100px;
    padding-right: 200px;
}
//左边元素更改
.left {
    background: red;
    width: 100px;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -100px;
    height: 100%;
}
//中间部分
.main {
    background: blue;
    width: 100%;
    height: 100%;
    float: left;
}
//右边元素定义
.right {
    background: red;
    width: 200px;
    height: 100%;
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
}

관련 설명은 다음과 같습니다.

( 1) 브라우저 너비 변경에 따라 가운데 부분이 변경되어야 하므로 여기서는 왼쪽, 가운데, 오른쪽이 왼쪽으로 떠 있도록 설정되어 있기 때문입니다. 가운데 부분은 100%이고 왼쪽과 오른쪽 레이어는 위치가 전혀 없습니다

(2) 왼쪽 여백을 100 줄인 후 왼쪽이 너무 음수로 올라간 것을 확인했습니다. 창문을 넣을 공간이 없어서 위로만 옮길 수 있었어요

(3) 두 번째 단계를 따르면 창 너비를 그만큼 넓게 옮기면 된다는 결론을 내릴 수 있습니다. 왼쪽과 오른쪽 열의 위치는 음수 여백을 사용합니다

(4) 그러나 왼쪽과 오른쪽 열이 가운데 부분을 가리므로 상대 위치 지정 방법을 사용하면 각각 자체적으로 밖으로 이동합니다. 자신을 기준으로 최종 결과를 얻습니다

3. 이중 비행 날개 레이아웃

HTML 코드는 다음과 같습니다.

<p class="main">
    <p class="inner">
        Main
    </p>
</p>
<p class="left">Left</p>
<p class="right">Right</p>

CSS 코드는 다음과 같습니다.

//CSS reset
body,html {
    height:100%;
    padding: 0;
    margin: 0
}
body {
    /*padding-left:100px;*/
    /*padding-right:200px;*/
}
.left {
    background: red;
    width: 100px;
    float: left;
    margin-left: -100%;
    height: 100%;
    /*position: relative;*/
    /*left:-100px;*/
}
.main {
    background: blue;
    width: 100%;
    float: left;
    height: 100%;
}
.right {
    background: red;
    width: 200px;
    float: left;
    margin-left: -200px;
    height: 100%;
    /*position:relative;*/
    /*right:-200px;*/
}
//新增inner元素
.inner {
    margin-left: 100px;
    margin-right: 200px;
}

성배 레이아웃 실제로는, 이후 단계에서는 복잡하고 유지 관리가 쉽지 않은 것으로 보입니다. Taobao UED와 논의한 결과 이중 비행 날개 레이아웃이라는 새로운 레이아웃 방법이 나왔습니다. p를 하나 더 추가하면 상대 레이아웃이 필요 없으며 부동 및 음수 여백만 사용됩니다. 성배 레이아웃과의 차이점이 지적되었습니다.

4. 플로팅

HTML 코드는 다음과 같습니다.

//注意元素次序
<p class="left">Left</p>
<p class="right">Right</p>
<p class="main">Main</p>

CSS 코드는 다음과 같습니다:

//CSS reset
body,html {
    height:100%;
    padding: 0;
    margin: 0
}
//左栏左浮动
.left {
    background: red;
    width: 100px;
    float: left;
    height: 100%;
}
//中间自适应
.main {
    background: blue;
    height: 100%;
    margin:0px 200px 0px 100px;
}
//右栏右浮动
.right {
    background: red;
    width: 200px;
    float: right;
    height: 100%;
}

이렇게 하면 코드가 충분히 간결하고 효율적이며 이해하기 쉽습니다

더 많은 CSS 3열 레이아웃을 구현하는 4가지 방법의 예에 대한 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!