6가지 클래식 CSS 3열 레이아웃 솔루션-CSS 튜토리얼-php.cn

CSS는 프런트엔드 개발 프로그래머에게 없어서는 안 될 언어입니다. CSS를 잘 익히면 프런트엔드 개발 작업이 크게 향상될 수 있습니다. 이 기사에서는 주로 고전적인 CSS 3열 레이아웃 체계를 소개하고 이를 모든 사람과 공유합니다.

3열 레이아웃은 이름에서 알 수 있듯이 양쪽이 고정되어 있고 가운데가 적응형입니다. 3열 레이아웃은 개발에서 매우 일반적입니다

1. 부동 레이아웃

가장 간단한 3열 레이아웃은 부동 소수점 레이아웃을 사용하는 것입니다. 먼저 왼쪽과 오른쪽 열을 그립니다:

    <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    </style>
      
      <p class="container">
        <p class="left"></p>
        <p class="right"></p>
        <p class="main"></p>
      </p>

로그인 후 복사

이때 왼쪽과 오른쪽 열의 분포를 얻을 수 있습니다:

다음으로 중간 열을 처리하는 방법을 살펴보겠습니다. 우리는 float 요소가 문서 흐름에서 벗어나고 다른 상자에서는 이 요소를 무시한다는 것을 알고 있습니다. (그러나 다른 상자의 텍스트는 여전히 이 요소를 위한 공간을 만들고 둘러쌉니다.) 따라서 이때 컨테이너 컨테이너에 일반 p만 추가하면 왼쪽과 오른쪽을 무시하고 전체 컨테이너를 채울 것입니다. 다만 게다가 여백은 왼쪽 오른쪽으로 공간이 흘러나온다:

   <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        margin-left: 120px;
        margin-right: 120px;
      }
    
      .container {
        border: 1px solid black;
      }
    
      <p class="container">
      <p class="left"></p>
      <p class="right"></p>
      <p class="main"></p>
      </p>

로그인 후 복사

장점: 단순함

단점: 중간 부분이 마지막에 로드되어 콘텐츠가 많을 때 경험에 영향을 미친다.

2. BFC 규칙

BFC(블록 서식 컨텍스트) 규칙은 BFC가 부동 요소와 겹치지 않도록 규정합니다. 따라서 메인 요소를 BFC 요소로 설정하면:

    <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        overflow: hidden;
      }
    
      <p class="container">
        <p class="left"></p>
        <p class="right"></p>
        <p class="main"></p>
      </p>

로그인 후 복사

3. 성배 레이아웃

성배 레이아웃의 핵심은 왼쪽, 중간, 오른쪽 열이 모두 float를 통해 부동된다는 것입니다. 그런 다음 음수 값을 통해 마진을 조정합니다.

첫 번째 단계는 기본 레이아웃을 살펴보는 것입니다

    <style>
        .left {
            float: left;
            width: 100px;
            height: 200px;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            background-color: yellow;
        }

        .main {
            float: left;
            width: 100%;
            height: 200px;
            background-color: blue;
        }
    </style>
    <body>
        <p class="container">
            <p class="main"></p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

로그인 후 복사

이때 보이는 효과는 왼쪽과 오른쪽 열이 두 번째 행으로 압착되는 것입니다. 이는 메인의 너비가 100%이기 때문입니다. 다음으로 왼쪽과 오른쪽 열의 여백을 조정하여 왼쪽, 가운데, 오른쪽을 한 줄에 넣습니다.

        .left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            background-color: yellow;
        }

로그인 후 복사

두 번째 단계는 왼쪽 여백을 -100%로 설정하는 것입니다. 이번에는 왼쪽 열이 첫 번째 행의 시작 부분으로 이동합니다. 그런 다음 오른쪽의 왼쪽 여백을 너비의 음수 값인 -100px로 설정하면 오른쪽 열도 왼쪽 및 중간 열과 동일한 줄로 이동됩니다.

그러나 아직 끝나지 않았습니다. 우리는 메인에 텍스트를 추가하려고 합니다:

    <body>
        <p class="container">
            <p class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

로그인 후 복사

텍스트가 표시되지 않는 것을 볼 수 있으며 다음에는 이 문제를 해결해야 합니다.

세 번째 단계는 컨테이너에 패딩을 제공하는 것입니다. 패딩은 왼쪽 및 오른쪽 열의 너비와 정확히 동일해야 합니다.

        .container {
            padding-left: 100px;
            padding-right: 100px;
        }

로그인 후 복사

이 때 볼 수 있는 결과는 왼쪽, 중간 및 오른쪽 열은 전체적으로 모두 축소되었지만 텍스트는 여전히 표시되지 않습니다.

네 번째 단계는 왼쪽 및 오른쪽 열에 상대 레이아웃을 추가한 다음 왼쪽 및 오른쪽 값을 설정하여 바깥쪽으로 이동하는 것입니다.

        .left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            position: relative;
            left: -100px;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            position: relative;
            right: -100px;
            background-color: yellow;
        }

로그인 후 복사

이제 끝났습니다.

4. Double Flying Wing 레이아웃

Double Flying Wing 레이아웃의 처음 두 단계는 성배 레이아웃과 동일하지만 중간 열의 콘텐츠가 차단되는 문제에 대한 해결책이 다릅니다. :

메인 부분의 콘텐츠가 차단되므로 메인 내부에 다른 콘텐츠를 추가하고 여백을 설정하여 가려짐을 방지하면 문제가 해결될 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .main {
        float: left;
        width: 100%;
        }
        .content {
        height: 200px;
        margin-left: 110px;
        margin-right: 220px;
        background-color: green;
        }
        
        .main::after {
        display: block;
        content: &#39;&#39;;
        font-size: 0;
        height: 0;
        clear: both;
        zoom: 1;
        }
    .left {
        float: left;
        height: 200px;
        width: 100px;
        margin-left: -100%;
        background-color: red;
    }
    .right {
        width: 200px;
        height: 200px;
        float: left;
        margin-left: -200px;
        background-color: blue;
    }   
    </style>
</head>
<body>
    <p class="main">
        <p class="content"></p>
    </p>
    <p class="left"></p>
    <p class="right"></p>
</body>
</html>

로그인 후 복사

유일하게 주목할 점은 플로트를 지우려면 main 뒤에 요소를 추가해야 합니다.

5. Flex 레이아웃

Flex를 사용하여 3열 레이아웃을 구현하는 것도 매우 간단하지만 브라우저 호환성에 주의해야 합니다.

        <style type="text/css">
            .container {
                display: flex;
                flex-direction: row;
            }
            .middle {
                height: 200px;
                background-color: red;
                flex-grow: 1;
            }

            .left {
                height: 200px;
                order: -1;
                margin-right: 20px;
                background-color: yellow;
                flex: 0 1 200px;
            }

            .right {
                height: 200px;
                margin-left: 20px;
                background-color: green;
                flex: 0 1 200px;
            }
        </style>
    </head>
    <body>
        <p class="container">
            <p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

로그인 후 복사

있습니다. 몇 가지 참고 사항:

Main이 먼저 로드되면 먼저 작성해야 하지만 left는 맨 왼쪽에 표시되어야 하므로 left의 순서를 -1
으로 설정해야 합니다. flex 속성의 작성 방법은 flex: flex-grow flex-shrink flex-basis입니다. 이는 flex의 3열 레이아웃의 핵심이기도 합니다. 이는 flex-grow를 1로 설정합니다. 즉, 공간이 충분하지 않으면 왼쪽과 오른쪽 부분만 줄어듭니다. 동시에 왼쪽과 오른쪽 부분의 플렉스 기준이 지정되어 있기 때문에 두 부분의 폭을 늘려 디스플레이 효과를 보장합니다

6. 절대 위치 지정

절대 위치 지정 방법도 비교적 간단합니다. 본체를 먼저 로드할 수 있습니다:

        <style type="text/css">
            .container {
            }
            .middle {
                position: absolute;
                left: 200px;
                right: 200px;
                height: 300px;
                background-color: yellow;
            }

            .left {
                position: absolute;
                left: 0px;
                width: 200px;
                height: 300px;
                background-color: red;
            }

            .right {
                position: absolute;
                right: 0px;
                width: 200px;
                background-color: green;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <p class="container">
            <p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

로그인 후 복사

위 내용은 6가지 클래식 CSS 3열 레이아웃 계획에 관한 내용입니다. 모두에게 도움이 되기를 바랍니다.