집 > 기사 > 웹 프론트엔드 > CSS에는 3열 레이아웃을 구현하는 여러 가지 방법이 있습니다.

CSS에는 3열 레이아웃을 구현하는 여러 가지 방법이 있습니다.

php中世界最好的语言원래의: 2018-03-22 09:40:031928검색

이번에는 CSS를 사용하여 3열 레이아웃을 구현하는 여러 가지 방법을 알려드리겠습니다. CSS를 사용하여 3열 레이아웃을 구현할 때 주의사항은 무엇인가요? 몇 가지 실제 사례를 살펴보겠습니다.

머리말

사실 3열 레이아웃이든 2열 레이아웃이든 우리는 일상적인 프로젝트에서 자주 사용합니다. 아마도 3열 레이아웃이 무엇인지 모르실 수도 있고, 2열 레이아웃이 무엇인지, 실제로는 이미 사용하고 있을 수도 있습니다. 3열 레이아웃의 한두 가지 방법을 알고 있을 수도 있지만, 실제 작업에서는 그 한 가지 방법만 구체적으로 소개합니다. 3열 레이아웃의 개요를 설명하고 사용 시나리오를 소개합니다.

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

1.절대 위치 지정method

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%를 사용하려면 여기서 왼쪽, 가운데, 오른쪽이 왼쪽으로 떠 있게 놔두세요. 가운데가 100%이기 때문에 왼쪽과 오른쪽 레이어가 전혀 올라갈 위치가 없습니다

( 2) 왼쪽 레이어 여백에 대해 마이너스 100을 적용한 후 왼쪽이 위로 올라가는 것을 알 수 있습니다. 이는 out에 대해 음수이기 때문입니다. 창에는 위치가 없으며 위로만 이동할 수 있습니다.

(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%;
}

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

요약

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!