이중 비행 날개 레이아웃과 성배 레이아웃에 대한 자세한 그래픽 및 텍스트 설명

이번에는 이중 비행 날개 레이아웃과 성배 레이아웃에 대한 자세한 설명을 사진과 텍스트로 가져왔습니다. 이중 비행 날개 레이아웃과 성배 레이아웃 사용 시 주의사항은 무엇인가요? 함께 살펴보세요.

이중 날개 레이아웃과 성배 레이아웃은 양쪽에 고정된 중앙이 있는 적응형 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>

스타일:

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

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

1. 중간 부분은 브라우저 너비 변경에 따라 변경되어야 하므로 여기서는 왼쪽, 가운데, 오른쪽을 왼쪽으로 띄우도록 합니다. 중간 부분은 100%이고, 왼쪽과 오른쪽 레이어는 전혀 위치가 올라가지 않습니다.

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

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

2. 왼쪽 레이어에서 마이너스 margin150을 적용한 후 왼쪽이 올라간 것을 확인했습니다. 창 밖에 위치가 없다는 단점이 있어서 위로만 이동할 수 있어요

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

3. 그런 다음 두 번째를 누르세요. 이 방법을 따르면 창 너비만큼만 이동하면 되는 것을 알 수 있습니다. 가장 왼쪽 위치. 왼쪽 및 오른쪽 열의 위치를 ​​지정하려면 음수 여백을 사용하세요

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

4. 그런데 문제는 가운데가 왼쪽과 오른쪽에 의해 가려져 있다는 점입니다. 바깥쪽 레이어에 패딩을 추가해야 했습니다.

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

5. 그런데 추가하고 나면 왼쪽과 오른쪽 열도 들여쓰기가 되어 있어서 상대 위치 지정 방식을 사용해서 자신을 기준으로 밖으로 이동시켜 최종 결과를 얻었습니다

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

2 . 이중 비행 날개 레이아웃

성배 레이아웃은 이미 완벽합니다. 성배 레이아웃은 상대 위치 지정을 사용하므로 너비 제어도 변경되어야 합니다. 더 간결하고 편리한 다른 방법은 없나요?

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

DOM 구조: 메인 내부 레이어에 p가 추가되었습니다

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

스타일:

왼쪽 열과 오른쪽 열의 상대적 위치가 제거되었습니다.

래핑 레이어 패딩이 제거되었으며, 중간 열의 새로운 p가 교체되었습니다

        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;*/
        }
        .inner{
            margin-left:150px;
            margin-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 요소로 바뀌면서 화면 너비가 줄어들어도 메인이 눌려지지 않고 성배 레이아웃이 눌려집니다.

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

추천 자료:

Css3 전환 부드러운 전환 메뉴 표시줄 구현

css에서 0.5픽셀 선 만드는 방법

위 내용은 이중 비행 날개 레이아웃과 성배 레이아웃에 대한 자세한 그래픽 및 텍스트 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!