CSS 3열 레이아웃에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 3열 레이아웃에 대한 자세한 설명

php中世界最好的语言

Mar 20, 2018 pm 04:34 PM

css상해

이번에는 CSS 3열 레이아웃에 대한 자세한 설명을 가져왔습니다. CSS 3열 레이아웃의 주의사항은 무엇인가요?

이 글에서는 CSS의 고전적인 3열 레이아웃 방식을 소개하고 이를 모든 사람과 공유하고 직접 메모해 보세요. 세부 사항은 다음과 같습니다.

3열 레이아웃은 이름에서 알 수 있듯이 양쪽이 고정되어 있습니다. 중간에는 적응력이 있습니다. 3열 레이아웃은 개발에서 매우 일반적입니다

1. float 레이아웃

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

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

장점: 단순함

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

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 class="right">
        <p class="main">
      </style>

3. 성배 레이아웃

성배 레이아웃의 핵심은 왼쪽, 중간, 오른쪽 열이 모두 부동 소수점으로 부동화된 다음 조정된다는 것입니다. 마이너스 마진으로.

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

    <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>
    
        <p>
            </p><p></p>
            <p></p>
            <p></p>

이때 보이는 효과는 왼쪽과 오른쪽 열이 두 번째 행으로 압착되는 것입니다. 이는 메인의 너비가 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로 설정하면 오른쪽 열도 왼쪽 및 중간 열과 동일한 줄로 이동됩니다.

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

    
        <p>
            </p><p>fjlskdjflkasjdfljasdljlsjdljsdjflksadj</p>
            <p></p>
            <p></p>

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

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

        .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. 이중 비행 날개 레이아웃

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

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

nbsp;html>


    <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>


    <p>
        </p><p></p>
    
    <p></p>
    <p></p>

유일하게 주의할 점은 뒤에 요소를 추가해야 한다는 것입니다. 플로트를 지우는 메인.

5. Flex 레이아웃

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

        <style>
            .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>
    
    
        <p>
            </p><p>fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
            <p></p>
            <p></p>

몇 가지 사항이 있습니다. 주의하세요:

main要首先加载就必须写在第一位，但因为left需要显示在最左侧，所以需要设置left的order为-1
flex属性的完整写法是：flex: flex-grow flex-shrink flex-basis 。这也是flex实现三栏布局的核心，main设置flex-grow为1，说明多余空间全部给main，而空间不够时，仅缩小left right部分，同时因为指定了left right部分的flex-basis，所以指定了两者的宽度，保证其显示效果

6. 绝对定位

绝对定位的方式也比较简单，而且可以优先加载主体：

        <style>
            .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>
    
    
        <p>
            </p><p>fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
            <p></p>
            <p></p>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

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

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

Eclipse용 SAP NetWeaver 서버 어댑터

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

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.