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

4.

.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%로 설정

세 열 모두 부동입니다
왼쪽 및 오른쪽 열에 음수 여백을 추가하고 나란히 배치합니다. 중간 열 p를 사용하여 3열 레이아웃을 형성합니다.
중간 p 콘텐츠가 막히지 않는 문제를 해결하기 위한 다양한 아이디어가 차이점입니다.

• 성배 레이아웃

세 열의 외부 래핑 레이어의 왼쪽 및 오른쪽 패딩 왼쪽 및 오른쪽 패딩을 설정합니다.

상대 레이아웃 위치 사용: 왼쪽 및 오른쪽 ps에 대해 상대적이고 오른쪽과 일치 중간 p를 막지 않기 위해
이중 비행 날개 레이아웃
콘텐츠 배치를 위해 중간 p 내부에 하위 p를 만듭니다

이 하위 p에서 , margin-left 및 margin-right를 사용하여 왼쪽 및 오른쪽 열 p를 따로 설정합니다.
위치에는 1개의 p가 더 있고 4개의 CSS 속성(pp의 add-left 및 padding-right 두 속성)을 사용합니다. 성배 레이아웃의 중간과 왼쪽 및 오른쪽의 두 ps는 상대 레이아웃 위치를 사용합니다. 상대 및 해당 오른쪽 및 왼쪽에는 총 4개의 속성이 있으며 이중 날개 레이아웃 하위 p는 총 6개입니다. margin-left와 margin-right, 총 2가지 속성을 사용합니다(6-2=4).

• 그리고 이중 비행 날개 레이아웃에는 메인이 BFC 요소로 바뀌면서 화면 너비가 줄어들어도 메인이 눌려지지 않고 성배 레이아웃이 눌려집니다.

관련 권장 사항:

이중 비행 날개 레이아웃의 변형 및 사용에 대한 자세한 설명

성배 레이아웃에 대한 자세한 설명 및 CSS 레이아웃의 이중 비행 날개 레이아웃 예

,

성배 정보 성배 레이아웃과 이중 비행 날개 레이아웃

위 내용은 CSS 이중 비행 날개 레이아웃 및 성배 레이아웃이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!