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

성배 레이아웃과 이중 비행 날개 레이아웃은 주로 다음 문제를 해결하는 데 사용됩니다.

1. 3열 레이아웃, 양쪽 너비 고정, 가운데 조정 가능. 2. 중간 열이 브라우저에 먼저 로드되고 렌더링됩니다.

해결책:

먼저 가운데 div를 앞쪽에 쓴 다음 왼쪽, 오른쪽에 씁니다. 이렇게 하면 두 번째 문제가 해결되고 가운데 div가 먼저 렌더링됩니다.

그러나 여기에는 앞에 쓰여진 내용도 앞에 표시된다는 문제가 있습니다.

이 문제를 해결하기 위해 세 개의 열을 모두 부동으로 만듭니다. 그런 다음 가운데 열 너비를 100%로 설정합니다.

이때, 가운데 열이 첫 번째 행에 있고, 왼쪽과 오른쪽 열이 두 번째 행에 있습니다. 이때 왼쪽 열은 중앙 왼쪽으로, 오른쪽 열은 중앙 오른쪽으로 이동하기만 하면 됩니다. 왼쪽과 오른쪽에 고정 너비(예: 150px)를 추가합니다.

그런 다음 왼쪽 열에 음수 여백을 추가합니다. margin-left: -100%, 오른쪽 열에 음수 여백을 추가합니다. margin-left: -150px;

이제 3열 레이아웃이 형성된 것을 볼 수 있습니다. 그런데 문제는 중간 div의 내용이 차단되어 있다는 것입니다. 이 문제를 해결하면서 성배 레이아웃과 이중 날개 레이아웃은 서로 다른 아이디어를 가지기 시작했습니다.

성배 레이아웃은 먼저 3열 div 외부에 div를 배치합니다. 의미 태그 기사를 사용할 수 있습니다. 기사의 왼쪽 및 오른쪽 패딩 왼쪽 및 오른쪽 패딩을 설정한 후 왼쪽 및 오른쪽 div에 상대적인 상대 레이아웃 위치를 사용합니다. 이 시점에서 세 개의 열이 모두 가운데 쪽으로 들여쓰기되어 있는 것을 볼 수 있습니다. 그런 다음 왼쪽과 오른쪽 열에 각각 오른쪽과 왼쪽의 음수 값을 추가하여 목표를 달성합니다.

코드는 다음과 같습니다.

<span style="color: #0000ff;"><span style="color: #0000ff;">圣杯布局</span>html代码：<br><br><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            我是中间
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            我是左
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            我是右
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

<span style="color: #800000;">圣杯布局css代码：

*</span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
article</span>{<span style="color: #ff0000;">
    padding-left</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    padding-right</span>:<span style="color: #0000ff;">150px</span>;
}<span style="color: #800000;">
.main</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> lightblue</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100%</span>;
}<span style="color: #800000;">
.left</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> yellowgreen</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">-100%</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">left:-150px;</span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">
.right</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> pink</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">-150px</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">right:-150px;</span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">
.main,.left,.right</span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;
}

이중 날개 레이아웃은 중간 div 내부에 하위 div를 생성하여 콘텐츠를 배치합니다. 하위 div에서 왼쪽 및 오른쪽 열 div를 위한 공간을 남기는 데 margin-left 및 margin-right가 사용됩니다.

코드는 다음과 같습니다.

<span style="color: #000000;">双飞翼布局html代码：

</span><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="inside"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是中间
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是左
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是右
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

<span style="color: #800000;">双飞翼布局css代码：

*</span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.main</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> lightblue</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100%</span>;
}<span style="color: #800000;">
.inside</span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;">150px</span>;
}<span style="color: #800000;">
.left</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> yellowgreen</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">-100%</span>;
}<span style="color: #800000;">
.right</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> pink</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">-150px</span>;
}<span style="color: #800000;">
.main,.left,.right</span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;
}

다음으로 세 열의 높이를 동일하게 하려면 세 열에 각각 padding-bottom: 9999px; margin-bottom: -9999px; 속성을 추가하여 세 열의 길이를 무한대로 늘릴 수 있습니다. 세 개의 열 외부에 있는 기사 태그에 Overflow: Hidden; 속성을 추가하기만 하면 됩니다.

종료.