찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS의 3열 성배 레이아웃 체계에 대한 자세한 설명

CSS의 3열 성배 레이아웃 체계에 대한 자세한 설명

高洛峰
高洛峰원래의
2017-03-09 17:03:431787검색

성배 레이아웃은 아름다운 효과를 가지며 브라우저 호환성 요구 사항이 매우 낮습니다. 이는 매우 강력한 3열 페이지 레이아웃 솔루션입니다. 다음으로 CSS 3열 "성배 레이아웃"에 대한 전체 분석을 살펴보겠습니다. " 해결 방법:

성배 레이아웃은 Matthew Levine이 2006년에 쓴 기사에서 유래되었습니다. DOM 구조는 다음과 같습니다. 

<p class="container">
    <p class="main"></p>
 <p class="sub"></p>
 <p class="extra"></p>
</p>

프로세스 설명
계속 다음으로 성배 레이아웃을 단계별로 구현해 보겠습니다.

1 먼저 기본 열, 하위 열, 추가 열을 각각 띄운 다음 음수 여백을 사용하여 하위 열과 왼쪽과 오른쪽에 추가 열이 있습니다. 이때 CSS 코드는 다음과 같습니다. 

.main {   
 float: left;   
 width: 100%;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.sub {   
 float: left;   
 width: 200px;   
 height: 300px;   
 margin-left: -100%;   
 background-color: rgba(0, 255, 0, .5);   
}   
.extra {   
 float: left;   
 width: 180px;   
 height: 300px;   
 margin-left: -180px;   
 background-color: rgba(0, 0, 255, .5);   
}

2. 이전 단계를 완료한 후 sub 및 extra 열이 올바른 위치에 도달했지만 sub 및 extra 열이 모두 덮습니다. 성배 레이아웃의 경우 이 문제에 대한 해결책은 메인 열이 올바른 위치에 배치되도록 컨테이너에 왼쪽 및 오른쪽 패딩을 추가하는 것입니다. 

.container {   
 padding-left: 210px;   
 padding-right: 190px;   
}

3. 두 번째 단계를 완료한 후 새로운 문제가 나타났습니다. 하위 열과 추가 열도 컨테이너의 왼쪽 및 오른쪽 내부 여백에 영향을 받아 위치가 이동했습니다. 이 문제를 해결하기 위해 성배 레이아웃은 상대 위치 지정을 사용하여 하위 열과 추가 열을 올바른 위치로 되돌립니다. 새로 추가된 코드는 다음과 같습니다: 

.sub {   
 position: relative;   
 left: -210px;   
}   
.extra {   
 position: relative;   
 rightright: -190px;   
}

4. 브라우저가 어느 정도 줄어들면 이 레이아웃이 깨질 수 있습니다. 이는 min-width 속성을 추가하면 해결됩니다. 몸에. 최종 성배 레이아웃 CSS 코드는 다음과 같습니다. 

body {   
 min-width: 600px; /* 2*sub + extra */
}   
.container {   
 padding-left: 210px;   
 padding-right: 190px;   
}   
.main {   
 float: left;   
 width: 100%;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.sub {   
 position: relative;   
 left: -210px;   
 float: left;   
 width: 200px;   
 height: 300px;   
 margin-left: -100%;   
 background-color: rgba(0, 255, 0, .5);   
}   
.extra {   
 position: relative;   
 rightright: -190px;   
 float: left;   
 width: 180px;   
 height: 300px;   
 margin-left: -180px;   
 background-color: rgba(0, 0, 255, .5);   
}

전체 예시

효과는 다음과 같습니다.
CSS의 3열 성배 레이아웃 체계에 대한 자세한 설명

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

<!DOCTYPE html>   
<html>   
<head>   
    <meta charset="utf-8">   
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   
    <title>圣杯布局</title>   

    <style type="text/css">   
    body {background-color: #ffffff; font-size:14px;}   
    #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;}   
    .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;}   
    .main {background-color: #03a9f4; color:#ffffff;}   
    .aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;}   
    p {margin:0; padding:20px; text-align: center;}   


    /* 左侧栏固定宽度，右侧自适应 */
    .bd-lft {   
        zoom:1;   
        overflow:hidden;   
        padding-left:210px;   
    }   
    .bd-lft .aside {   
        float:left;   
        width:200px;   
        margin-left:-100%; /*= -100%*/

        position:relative;   
        left:-210px; /* = -parantNode.paddingLeft */
        _left: 0; /*IE6 hack*/
    }   
    .bd-lft .main {   
        float:left;   
        width:100%;   
    }   


    /* 右侧栏固定宽度，左侧自适应 */
    .bd-rgt {   
        zoom:1;   
        overflow:hidden;   
        padding-right:210px;   
    }   
    .bd-rgt .aside {   
        float:left;   
        width:200px;   
        margin-left:-200px; /* = -this.width */

        position:relative;   
        rightright:-210px; /* = -parantNode.paddingRight */
    }   
    .bd-rgt .main {   
        float:left;   
        width:100%;   
    }   


    /* 左中右 三栏自适应 */
    .bd-3-lr {   
        zoom:1;   
        overflow:hidden;   
        padding-left:210px;   
        padding-right:210px;   
    }   
    .bd-3-lr .main {   
        float:left;   
        width:100%;   
    }   
    .bd-3-lr .aside-1 {   
        float: left;   
        width:200px;   
        margin-left: -100%;   

        position:relative;   
        left: -210px;   
        _left: 210px; /*IE6 hack*/
    }   
    .bd-3-lr .aside-2 {   
        float: left;   
        width:200px;   
        margin-left: -200px;   

        position:relative;   
        rightright: -210px;   
    }   

    /* 都在左边，右侧自适应 */
    .bd-3-ll {   
        zoom:1;   
        overflow:hidden;   
        padding-left:420px;   
    }   
    .bd-3-ll .main {   
        float:left;   
        width:100%;   
    }   
    .bd-3-ll .aside-1 {   
        float: left;   
        width:200px;   
        margin-left: -100%;   

        position:relative;   
        left: -420px;   
        _left: 0px; /*IE6 hack*/
    }   
    .bd-3-ll .aside-2 {   
        float: left;   
        width:200px;   
        margin-left: -100%;   

        position:relative;   
        left: -210px;   
        _left: 210px; /*IE6 hack*/
    }   

    /* 都在右边，左侧自适应 */
    .bd-3-rr {   
        zoom:1;   
        overflow:hidden;   
        padding-right:420px;   
    }   
    .bd-3-rr .main {   
        float:left;   
        width:100%;   
    }   
    .bd-3-rr .aside-1 {   
        float: left;   
        width:200px;   
        margin-left: -200px;   

        position:relative;   
        rightright: -210px;   
    }   
    .bd-3-rr .aside-2 {   
        float: left;   
        width:200px;   
        margin-left: -200px;   

        position:relative;   
        rightright: -420px;   
    }   


    </style>   

</head>   
<body>   

    <p id="hd">头部</p>   

    <p class="bd-lft">   
        <p class="main">   
            <p>主内容栏自适应宽度</p>   
        </p>   

        <p class="aside">   
            <p>侧边栏固定宽度</p>   
        </p>   
    </p>   

    <p class="bd-rgt">   
        <p class="main">   
            <p>主内容栏自适应宽度</p>   
        </p>   

        <p class="aside">   
            <p>侧边栏固定宽度</p>   
        </p>   
    </p>   

    <p class="bd-3-lr">   
        <p class="main">   
            <p>主内容栏自适应宽度</p>   
        </p>   

        <p class="aside-1">   
            <p>侧边栏1固定宽度</p>   
        </p>   

        <p class="aside-2">   
            <p>侧边栏2固定宽度</p>   
        </p>   
    </p>   

    <p class="bd-3-ll">   
        <p class="main">   
            <p>主内容栏自适应宽度</p>   
        </p>   

        <p class="aside-1">   
            <p>侧边栏1固定宽度</p>   
        </p>   

        <p class="aside-2">   
            <p>侧边栏2固定宽度</p>   
        </p>   
    </p>   

    <p class="bd-3-rr">   
        <p class="main">   
            <p>主内容栏自适应宽度</p>   
        </p>   

        <p class="aside-1">   
            <p>侧边栏1固定宽度</p>   
        </p>   

        <p class="aside-2">   
            <p>侧边栏2固定宽度</p>   
        </p>   
    </p>   

    <p id="ft">底部</p>   

</body>   
</html>

성배 레이아웃의 장점을 요약하면 다음과 같습니다.
1. 기본 콘텐츠 열을 먼저 로드합니다.
2. 모든 열이 가장 높도록 허용합니다.
3. 추가 페이지 없음.
4. 해킹이 거의 필요하지 않습니다.

위 내용은 CSS의 3열 성배 레이아웃 체계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS 웹 안전 글꼴 조합에 대한 자세한 설명다음 기사：CSS 웹 안전 글꼴 조합에 대한 자세한 설명

관련 기사

더보기