Holy Grail-Layout und Doppelflügler-Layout

Das Holy Grail-Layout und das Double Flying Wing-Layout werden hauptsächlich zur Lösung der folgenden Probleme verwendet:

1. Dreispaltiges Layout, feste Breite auf beiden Seiten, adaptiv in der Mitte. 2. Die mittlere Spalte wird zuerst geladen und im Browser gerendert.

Lösung:

Schreiben Sie zuerst das mittlere Div nach vorne, dann nach links, dann nach rechts. Dies löst das zweite Problem und das mittlere Div wird zuerst gerendert.

Dabei gibt es jedoch ein Problem: Was vorne steht, wird auch vorne angezeigt.

Um dieses Problem zu lösen, machen wir alle drei Spalten schwebend. Stellen Sie dann die mittlere Spaltenbreite auf 100 % ein.

Zu diesem Zeitpunkt befindet sich die mittlere Spalte in der ersten Zeile und die linke und rechte Spalte befinden sich in der zweiten Zeile. Zu diesem Zeitpunkt müssen Sie nur die linke Spalte nach links von der Mitte und die rechte Spalte nach rechts von der Mitte verschieben. Wir fügen links und rechts eine feste Breite hinzu, z. B. 150 Pixel.

Dann fügen Sie einen negativen Rand zur linken Spalte hinzu, margin-left: -100%; fügen Sie einen negativen Rand zur rechten Spalte margin-left: -150px hinzu;

An dieser Stelle können Sie sehen, dass das dreispaltige Layout erstellt wurde. Das Problem besteht jedoch darin, dass der Inhalt des mittleren Div blockiert ist. Bei der Lösung dieses Problems begannen die Konzepte des Holy Grail und des Doppelflügel-Layouts unterschiedliche Ideen zu entwickeln.

Das Holy-Grail-Layout fügt zunächst ein Div außerhalb des dreispaltigen Div ein. Wir können den semantischen Tag-Artikel verwenden. Nachdem Sie den linken und rechten Abstand links und rechts des Artikels festgelegt haben, verwenden Sie relative Layoutposition: relativ für die linken und rechten Divs. An dieser Stelle können Sie sehen, dass alle drei Spalten zur Mitte hin eingerückt sind. Fügen Sie dann die negativen Werte von rechts und links zur linken bzw. rechten Spalte hinzu, um das Ziel zu erreichen.

Der Code lautet wie folgt:

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

Das Doppelflügel-Layout erstellt ein Unter-Div innerhalb des mittleren Divs, um Inhalte im Unter-Div zu platzieren. Margin-left und Margin-right werden verwendet, um Platz für die linken und rechten Spalten-Divs zu lassen.

Der Code lautet wie folgt:

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

Wenn wir möchten, dass die drei Spalten gleich hoch sind, können wir den drei Spalten jeweils die Attribute padding-bottom: 9999px; margin-bottom: -9999px hinzufügen. Fügen Sie einfach das Attribut „overflow:hidden;“ zum Artikel-Tag außerhalb der drei Spalten hinzu.

Ende.