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

집

웹 프론트엔드

CSS 튜토리얼

6가지 클래식 CSS 3열 레이아웃 솔루션

小云云

Dec 04, 2017 pm 01:32 PM

css계획

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열 레이아웃 계획에 관한 내용입니다. 모두에게 도움이 되기를 바랍니다.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.