CSS 3열 레이아웃 구현 방법 요약(코드 예)

이 글은 CSS 3열 레이아웃의 구현 방법(코드 예제)을 요약한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. .

프론트 엔드의 경우 레이아웃도 마스터해야 합니다. 좋은 레이아웃은 페이지를 더욱 아름답게 만들 수 있습니다. 레이아웃에 관해서라면 CSS 3열 레이아웃에 대해 이야기해야 합니다. 프론트엔드 면접에서 자주 묻는 질문이자 기본적인 질문으로 여겨집니다. 소위 3열 레이아웃은 일반적으로 왼쪽과 오른쪽이 고정되고 가운데가 적응되거나, 가운데가 고정되고 왼쪽과 오른쪽이 적응되는 것을 말합니다.

고정 중간 적응형 왼쪽 및 오른쪽

성배 레이아웃

HTML 구조 설정

# 🎜🎜 #왼쪽, 기본, 오른쪽의 세 가지 하위 요소를 포함하는 새 상위 요소를 만듭니다. (메인이 앞에 쓰여 있으므로 페이지가 렌더링될 때 중간 부분이 먼저 로드되고 중간 부분이 로드됩니다. 면접 질문 먼저)

#🎜🎜 #스타일 스타일 설정

1. 상위 요소의 높이 설정

2. 세 요소를 부동으로 설정

3 .가운데 주요 부분은 너비가 100%로 고정되어 있습니다: 너비: 100%, 왼쪽 및 오른쪽 제품 요구 사항에 따라 양쪽의 너비와 높이를 설정합니다
4. 왼쪽 여백 설정: -100% ; 오른쪽에 여백 오른쪽 설정: -right 상자 너비
5. 상위 요소에 padding-left 설정: 왼쪽 상자 너비: 오른쪽 상자 너비
6. 왼쪽 및 오른쪽 상자 너비의 상대 위치 오른쪽 상자

<div>
  <div>go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
  <div></div>
  <div></div>
</div>
<style>
  body {
    min-width: 700px;
  }
  .container {
     height: 300px;
     padding: 0 200px 0 200px;
  }
  .f {
     float: left;
  }
  .main {
     width: 100%;
     height: 300px;
     background-color: cornflowerblue;
  }
  .left {
     width: 200px;
     height: 300px;
     background-color: indianred;
     margin-left: -100%;
     position: relative;
     left: -200px;
  }
  .right {
     width: 200px;
     height: 300px;
     background-color: lightgreen;
     margin-left: -200px;
     position: relative;
     right: -200px;
  }
</style>

레이아웃이 내부 요소의 영향을 받아 레이아웃이 망가질 확률은 낮지만, 브라우저 화면이 어느 정도 줄어들면 왼쪽과 오른쪽에 있는 콘텐츠가 떨어지게 됩니다. 꺼져 있거나 겹칩니다. 해결책은 몸체에 최소 너비를 추가하는 것입니다(적어도 왼쪽과 오른쪽 너비의 합보다 큼)

Double Flying Wing Layout

The idea 성배 레이아웃과 일치하지만 약간의 미묘한 차이가 있습니다.

HTML 구조 설정

왼쪽, 기본, 오른쪽의 세 가지 하위 요소를 포함하는 새 상위 요소를 생성합니다. (메인이 앞에 쓰여 있으므로 먼저 표시됩니다.) 페이지 렌더링 시) 중간 부분 로드, 면접 질문은 중간 부분 먼저 로드)

스타일 스타일 설정

1 상위 요소의 높이 설정#🎜 🎜# 2. 세 요소 모두에 대해 플로트 설정#🎜 🎜# 3. 중앙의 주요 부분은 너비가 100%로 고정되어 있습니다. 너비: 100%, 왼쪽과 오른쪽의 너비와 높이는 다음에 따라 설정됩니다. 제품 요구 사항

4. 중앙 부분에 내부 상자를 추가하여 콘텐츠를 배치합니다(성배 레이아웃과 다름)

5. margin-left 설정: 왼쪽에 -100% 설정; 오른쪽 여백: -오른쪽 상자 너비
6. 새 상자, 내부를 추가하고 왼쪽 및 오른쪽 패딩 또는 여백을 설정합니다

<div>
   <div>
      <div>go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
   </div>
   <div></div>
   <div></div>
</div>
<style>
  .container {
     height: 300px;
  }
  .f {
     float: left;
  }
  .main {
     width: 100%;
     height: 300px;
     background-color: cornflowerblue;
  }
  .left {
     width: 200px;
     height: 300px;
     background-color: indianred;
     margin-left: -100%;
  }
  .right {
     width: 200px;
     height: 300px;
     background-color: lightgreen;
     margin-left: -200px;
  }
  .inner {
    padding: 0 200px 0 200px;
  }
</style>

#🎜 🎜#Self-floating
#🎜 🎜#HTML 구조 설정

세 가지 새 요소 만들기: 왼쪽, 오른쪽, 메인(참고, 메인은 맨 끝에 작성됨)

스타일 스타일 설정

#🎜 🎜#1. 왼쪽 상자는 왼쪽으로 부동하고 오른쪽 상자는 오른쪽으로 부동합니다

2. 중간 부분에 여백 또는 패딩 값을 설정합니다

<div></div>
<div></div>
<div>我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
<style>
    .main {
        margin: 0 200px 0 200px;
        background-color: red;
        height: 200px;
    }
    .left {
        float: left;
        width: 200px;
        background-color: blue;
        height: 200px;
    }
    .right {
        float: right;
        width: 200px;
        background-color: pink;
        height: 200px;
    }
</style>

CSS3 새로운 기능: flex#🎜 🎜## 🎜🎜#HTML 구조 설정

왼쪽, 기본, 오른쪽의 세 가지 하위 요소를 포함하는 새 상위 요소 만들기(메인은 가운데에 작성됨)

스타일 스타일 설정

1. 상위 요소의 너비를 100%로 설정, display: flex

2. 제품 요구 사항에 따라 왼쪽과 오른쪽의 너비와 높이 설정

3. 중간 부분에 flex를 설정합니다: 1 ;

<div>
  <div></div>
  <div>我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
  <div></div>
</div>
<style>
    .container {
       width: 100%;
       height: 200px;
       display: flex;
   }
   .main {
       flex: 1;
       background-color: red;
       height: 200px;
   }
   .left {
       width: 200px;
       background-color: blue;
       height: 200px;
   }
   .right {
       width: 200px;
       background-color: pink;
       height: 200px;
   }
</style>

다른 작성 방법도 있으므로 여기서는 자세히 설명하지 않고 일반적으로 사용되는 방법만 나열하겠습니다. 인터뷰에서 물어볼 수 있는 상황. CSS3에는 또한 작업 및 학습 중에 깊이 연구할 가치가 있는 흥미로운 기능이 많이 있습니다.

가운데 왼쪽과 오른쪽 고정은 적응 가능

플로팅 + 음수 여백(성배 레이아웃)
#🎜🎜 #HTML 구조 설정

왼쪽, 기본, 오른쪽의 세 가지 하위 요소를 포함하는 새 상위 요소 만들기(참고, 기본은 중간에 작성됨)

스타일 스타일 설정 # 🎜🎜# 1. 왼쪽과 오른쪽이 각각 너비의 50%를 차지합니다 2. 왼쪽의 음수 여백-왼쪽이 가운데 p 너비의 절반을 차지합니다

3 . 오른쪽의 음수 여백도 가운데 p# 🎜🎜#

 <div>
   <div></div>
   <div>我是中间内容</div>
   <div></div>
 </div>
 <style>
    .main {
        width: 100px;
        text-align: center;
        float: left;
        background-color: lightgreen;
        height: 300px;
    }
    .left {
        height: 300px;
        float: left;
        width: 50%;
        margin-left: -50px;
        background-color: pink;
    }
    .right {
        height: 300px;
        float: right;
        width: 50%;
        margin-right: -50px;
        background-color: cornflowerblue;
    }
 </style>

CSS3 새로운 기능: flex

HTML 구조 설정

# 🎜🎜#왼쪽, 기본, 오른쪽의 세 가지 하위 요소를 포함하는 새 상위 요소 만들기#🎜🎜 #

스타일 스타일 설정

1 상위 요소 표시 설정: flex- 방향: 행;

2. 왼쪽과 오른쪽에 flex-grow 설정: 1, 남은 공간을 균등하게 나눕니다#🎜 🎜#

 <div>
   <div></div>
   <div>我是中间内容</div>
   <div></div>
 </div>
 <style>
    .container {
        display: flex;
        flex-direction : row;
    }
    .main {
        width: 200px;
        height: 300px;
        text-align: center;
        background-color: lightgreen;
    }
    .left {
        height: 300px;
        flex-grow: 1;
        background-color: pink;
    }
    .right {
        height: 300px;
        flex-grow: 1;
        background-color: cornflowerblue;
    }
 </style>

CSS3 기능 calc(4개의 산술 연산)
#🎜 🎜#은 길이 값을 동적으로 계산하는 데 사용됩니다. 예를 들어 width: calc(100% - 50px)와 같이 연산자 앞뒤에 공백을 예약해야 한다는 점에 유의해야 합니다.

HTML 구조 설정

왼쪽, 기본, 오른쪽의 세 가지 하위 요소를 포함하는 새 상위 요소 만들기

스타일 스타일 설정

# 🎜🎜#1. 상위 요소의 너비를 100%로 설정합니다.

2. 왼쪽 및 오른쪽 너비를 설정합니다: calc(50%, - 중간 너비/2)

 <div>
   <div></div>
   <div>我是中间内容</div>
   <div></div>
 </div>
 .container {
     width: 100%;
     height: 300px;
 }
 .f {
     float: left;
 }
 .main {
     width: 100px;
     text-align: center;
     background-color: lightgreen;
     height: 300px;
 }
 .left {
     height: 300px;
     background-color: pink;
     width: calc(50% - 50px);  /*平分中间部分的宽度*/
 }
 .right {
     height: 300px;
     background-color: cornflowerblue;
     width: calc(50% - 50px);  /*平分中间部分的宽度*/
 }

The road 다른 사람이 똑똑하다면, 열심히 일하면 약점을 보완할 수 있다고 믿고 인내하며 열심히 일하십시오. 매일 조금씩 발전하다 보면 언젠가 큰 진전을 이루게 될 것입니다.

위 내용은 CSS 3열 레이아웃 구현 방법 요약(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!