Ausführliche grafische und textliche Erläuterung des Doppelflügler-Layouts und des Holy-Grail-Layouts

Dieses Mal werde ich Ihnen eine detaillierte Erklärung des Double Flying Wing-Layouts und des Holy Grail-Layouts mit Bildern und Texten geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Double Flying Wing-Layouts und des Holy Grail-Layouts? Das Folgende ist ein praktischer Fall, schauen wir uns ihn gemeinsam an.

Doppelflügel-Layout und Holy Grail-Layout sind beide Möglichkeiten, ein adaptives Drei-Spalten-Layout mit einer festen Mitte auf beiden Seiten zu erreichen. Ich habe kürzlich Hinweise zur Implementierung eines Drei-Spalten-Layouts aussortiert. Spaltenlayout, und ich beschloss, es herauszuholen und zur Kenntnis zu nehmen. Diese beiden klassischen Layouts.

1. Holy Grail-Layout

Floating, negative Ränder, relative Positionierung, keine zusätzlichen Tags

Rendering

DOM-Struktur:

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

Stil:

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

Linker, mittlerer und rechter Teil Stiländerungsprozess

1. Der mittlere Teil muss entsprechend der Änderung der Browserbreite geändert werden, daher wird hier 100 % verwendet, um nach links zu schweben Der mittlere Teil ist 100 %, die linke Ebene und es gibt überhaupt keine Position für die rechte Ebene, um nach oben zu gehen

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

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

2. Nach negativem Rand 150 Für die linke Ebene habe ich festgestellt, dass die linke Ebene nach oben ging, weil sie so negativ war, dass es keine Position zum Verlassen des Fensters gab. Sie kann nur nach oben verschoben werden

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

3. Aus dem zweiten Schritt kann geschlossen werden, dass nur die Fensterbreite so weit wie möglich verschoben werden muss. Verwenden Sie auf der linken Seite negative Ränder, um die linke und rechte Spalte zu positionieren 🎜>

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

4. Allerdings kommt das Problem, die Mitte ist von links und rechts blockiert, sodass ich es nach außen lassen muss zur Ebene hinzugefügt

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

5. Nach dem Hinzufügen wurden jedoch auch die linke und rechte Spalte eingerückt, sodass die relative Positionierungsmethode verwendet wurde. Jeder positioniert sich relativ zu sich selbst und erhält das Endergebnis

.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. Doppelte Nurflügelanordnung

Ohne das Hinzufügen zusätzlicher Tags ist das Holy Grail-Layout bereits perfekt. In Zukunft wird das Layout Einschränkungen aufweisen, und es gibt viele Möglichkeiten, die Breitensteuerung zu ändern Gibt es eine andere Methode, die prägnanter und bequemer ist?

In der Taobao UED-Diskussion macht das Hinzufügen eines weiteren p die Notwendigkeit eines relativen Layouts überflüssig und verwendet nur schwebende und negative Ränder. Dies nennen wir das Double Flying Wing-Layout.

DOM-Struktur: Ein p hinzugefügt

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

Stil:

Die relative Positionierung der linken und rechten Spalte entfernt

Entfernt Für die Wickelschichtpolsterung, ersetzen Sie den Rand von p in der mittleren Spalte durch ein neues p. Die Lösung für das Problem der doppelten Nurflügler-Anordnung ist die gleiche wie in der ersten Hälfte, nämlich:

        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;

Die Breite der mittleren Spalte ist auf 100 % eingestellt

Alle drei Spalten floaten float

• Fügen Sie zur Zeile einen negativen Rand zur linken und rechten Spalte hinzu Fügen Sie sie mit der mittleren Spalte p zusammen, um ein dreispaltiges Layout zu bilden.

• Der Unterschied liegt in den unterschiedlichen Ideen zur Lösung des Problems der Nicht-Okklusion von p-Inhalten in der mittleren Spalte.
  Holy Grail Layout

• Legen Sie den linken und rechten Abstand links und rechts der äußeren Umhüllungsschicht der drei Spalten fest

Legen Sie die linke und rechte Seite fest. Die beiden ps verwenden die relative Layoutposition: relativ und stimmen mit den rechten bzw. linken Attributen überein und bewegen sich relativ zu sich selbst, um das mittlere p nicht zu blockieren

• Doppeltes Nurflügler-Layout

• Erstellen Sie ein Sub-P innerhalb des mittleren P, um Inhalte zu platzieren

Verwenden Sie in diesem Sub-P den Rand -left und margin-right, um Platz für die linke und rechte Spalte p zu lassen

• Es gibt ein weiteres p und es werden 4 CSS-Attribute weniger verwendet (die beiden Attribute von „adding-left“ und „adding-left“) Padding-right von pp in der Mitte des Holy-Grail-Layouts, plus die beiden ps links und rechts, verwenden die relative Layoutposition: relative und Die entsprechende rechte und linke Seite haben insgesamt 4 Attribute, insgesamt 6; Flügellayout sub-p verwendet insgesamt 2 Attribute „margin-left“ und „margin-right“, 6-2=4).
  Darüber hinaus hat das Double-Flying-Wing-Layout einen weiteren Vorteil: Es verwandelt das Main in ein BFC-Element. Wenn die Bildschirmbreite reduziert wird, wird das Main-Layout nicht verdrängt .
• Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

  Empfohlene Lektüre:

Css3 Transition Smooth Transition Menu Bar-Implementierung

So erstellen Sie eine 0,5-Pixel-Linie in CSS

Das obige ist der detaillierte Inhalt vonAusführliche grafische und textliche Erläuterung des Doppelflügler-Layouts und des Holy-Grail-Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!