집 > 기사 > 웹 프론트엔드 > CSS의 고전적인 3열 레이아웃을 구현하는 방법

CSS의 고전적인 3열 레이아웃을 구현하는 방법

php中世界最好的语言원래의: 2018-01-30 10:00:111427검색

이번에는 CSS의 클래식 3열 레이아웃을 구현하는 방법과 CSS의 클래식 3열 레이아웃을 구현할 때 주의사항이 무엇인지 보여드리겠습니다. 실제 사례를 살펴보겠습니다.

이 글에서는 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>
   
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>

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

<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;
   }
  
   <div class="container">
   <div class="left"></div>
   <div class="right"></div>
   <div class="main"></div>
   </div>

장점: 단순함

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

2. BFC 규칙

BFC(Block Formatting Context) 규칙은 다음과 같이 규정합니다. 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;
  }
 
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>

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>
<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</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로 설정하면 오른쪽 열도 왼쪽 및 중간 열과 동일한 줄로 이동됩니다.

하지만 아직 끝나지 않았습니다. add it in main 일부 텍스트:

<body>
    <div class="container">
        <div class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</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;
}

이제 끝났습니다.

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