CSS 이중 비행 날개 레이아웃 및 성배 레이아웃이란 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 이중 비행 날개 레이아웃 및 성배 레이아웃이란 무엇입니까?

小云云

Dec 12, 2017 am 09:41 AM

css공들여 나열한 것

이 글은 주로 CSS double Flying Wing 레이아웃과 Holy Grail 레이아웃에 대한 간략한 논의를 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

이중 날개 레이아웃과 성배 레이아웃은 양쪽에 중앙이 고정된 적응형 3열 레이아웃을 구현하는 방법입니다. 최근 3열 레이아웃을 구현하는 방법에 대한 메모를 정리하다가 빼기로 결정했습니다. 이 두 가지 고전적인 레이아웃을 기억하는 기사입니다.

1. 성배 레이아웃

부동, 음수 여백, 상대 위치 지정, 추가 태그 없음

Rendering

DOM 구조:

<p class="header">Header</p>
<p class="bd">
    <p class="main">Main</p>
    <p class="left">Left</p>
    <p class="right">Right
    </p>
</p>
<p class="footer">Footer</p>

스타일:

rreee

왼쪽, 가운데, 오른쪽 부분의 스타일 변경 과정

1. 중간 부분은 브라우저 너비 변경에 따라 변경되어야 하므로 여기서는 * 왼쪽, 가운데, 오른쪽이 플로팅되도록 합니다. 왼쪽, 가운데 부분이 100%이기 때문에 왼쪽 레이어와 오른쪽 레이어가 올라갈 위치가 없습니다

<style>
        body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .bd{
            padding-left:150px;
            padding-right:190px;
        }
        .left{
            background: #E79F6D;
            width:150px;
            float:left;
            margin-left:-100%;
            position: relative;
            left:-150px;
        }
        .main{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .right{
            background: #77BBDD;
            width:190px;
            float:left;
            margin-left:-190px;
            position:relative;
            right:-190px;
        }
    </style>

2. 왼쪽 레이어의 여백을 150만큼 줄인 후, 왼쪽 레이어가 올라간 것을 발견했습니다. 너무 네거티브여서 창문을 위한 공간이 없어서 위로만 이동할 수 있었거든요

      .left{
            background: #E79F6D;
            width:150px;
            float:left;
        }
        .main{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .right{
            background: #77BBDD;
            width:190px;
            float:left;
        }

3. 그런 다음 두 번째 단계에 따라 다음을 수행할 수 있습니다. 창 너비를 가장 왼쪽 너비만큼만 이동하면 됩니다. 왼쪽 및 오른쪽 열을 배치하려면 음수 여백을 사용하세요

.left{ 
   background: #E79F6D; 
   width:150px; 
   float:left; 
   margin-left:-150px; 
}

.left{ 
  background: #E79F6D; 
  width:150px; 
  float:left; 
  margin-left:-100%; 
}
.right{ 
  background: #77BBDD; 
  width:190px; 
  float:left; 
  margin-left:-190px; 
}

5. 추가하고 나서 왼쪽 열과 오른쪽 열도 들여쓰기가 되어서 상대 위치 지정을 사용했습니다. . 방법, 각각은 자신을 기준으로 이동하여 최종 결과를 얻습니다

2. 추가 태그를 추가하지 않고도 성배 레이아웃은 이미 완벽합니다. 성배 레이아웃 상대 위치 지정을 사용한 후에는 레이아웃에 제한이 생기고 너비 제어를 변경할 수 있는 곳이 많아질 것입니다. 그렇다면 더 간결하고 편리한 다른 방법이 있을까요?

Taobao UED 토론에서 p를 하나 더 추가하면 상대 레이아웃이 필요하지 않고 부동 및 음수 여백만 사용됩니다. 이것이 바로 이중 비행 날개 레이아웃입니다. DOM 구조: 메인 내부 레이어에 p가 추가되었습니다

.bd{ 
  padding-left:150px; 
  padding-right:190px;
}

스타일:

왼쪽 및 오른쪽 열의 상대적 위치를 제거했습니다.

래핑 레이어 패딩을 제거하고 여백으로 교체했습니다. 중간 열의 새로운 p

.left{ 
  background: #E79F6D; 
  width:150px; 
  float:left; 
  margin-left:-100%; 
  position: relative; 
  left:-150px; 
} 
.right{ 
  background: #77BBDD; 
  width:190px; 
  float:left; 
  margin-left:-190px; 
  position:relative; 
  right:-190px; 
}

3. 이중 비행 날개 레이아웃과 성배 레이아웃의 차이점

성배 레이아웃과 이중 비행 날개 레이아웃의 문제에 대한 해결책은 다음과 같습니다. 전반부도 동일합니다.

중간 열 너비를 100%로 설정