Zusammenfassung der Implementierungsmethoden des dreispaltigen CSS-Layouts (Codebeispiel)

Dieser Artikel bietet Ihnen eine Zusammenfassung der Implementierungsmethoden des dreispaltigen CSS-Layouts (Codebeispiele). Ich hoffe, dass er für Sie hilfreich ist.

Für das Frontend muss auch das Layout beherrscht werden. Ein gutes Layout kann die Seite schöner aussehen lassen. Wenn es um das Layout geht, müssen wir über das dreispaltige CSS-Layout sprechen. Diese Frage wird häufig in Front-End-Interviews gestellt und gilt als grundlegende Frage. Das sogenannte Drei-Spalten-Layout bezieht sich im Allgemeinen darauf, dass die linke und rechte Seite fest und die mittlere adaptiv ist, oder dass die Mitte fixiert ist und die linke und rechte Seite adaptiv sind.

Mitte adaptive linke und rechte Seite korrigiert

Holy Grail-Layout

HTML-Struktureinstellungen

Erstellen Sie ein neues übergeordnetes Element, einschließlich drei untergeordnete Elemente: left, main, right (beachten Sie, dass main am Anfang steht, sodass der mittlere Teil beim Rendern der Seite zuerst geladen wird und der mittlere Teil bei Interviewfragen zuerst geladen wird)

Stileinstellungen

1. Höhe des übergeordneten Elements festlegen
2. Alle drei Elemente sind auf Float eingestellt
3. Der mittlere Hauptteil hat eine feste Breite von 100 %: Breite: 100 %, und die Breite und Höhe der linken und rechten Seite werden entsprechend den Produktanforderungen eingestellt
4. Rand links festlegen: -100 %; Rand rechts festlegen: -rechte Feldbreite
5. Übergeordnetes Element legt padding-left: linke Boxbreite; padding-right: rechte Boxbreite fest
6. Relative Positionierung der linken und rechten Boxen

<div class="container">
  <div class="main f">go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
  <div class="left f"></div>
  <div class="right f"></div>
</div>
<style>
  body {
    min-width: 700px;
  }
  .container {
     height: 300px;
     padding: 0 200px 0 200px;
  }
  .f {
     float: left;
  }
  .main {
     width: 100%;
     height: 300px;
     background-color: cornflowerblue;
  }
  .left {
     width: 200px;
     height: 300px;
     background-color: indianred;
     margin-left: -100%;
     position: relative;
     left: -200px;
  }
  .right {
     width: 200px;
     height: 300px;
     background-color: lightgreen;
     margin-left: -200px;
     position: relative;
     right: -200px;
  }
</style>

Die Wahrscheinlichkeit, dass dieses Layout von internen beeinflusst wird Elemente und zerstört das Layout ist gering, aber wenn der Browserbildschirm bis zu einem gewissen Grad verkleinert wird, fallen die Inhalte auf der linken und rechten Seite ab oder überlappen sich. Die Lösung besteht darin, dem Körper eine Mindestbreite hinzuzufügen (mindestens größer als die Summe der Breiten der linken und rechten Seite).

Doppelte Nurflügler-Anordnung

Die Idee stimmt mit der überein Holy Grail-Layout, es gibt jedoch einige subtile Unterschiede.

HTML-Struktureinstellungen

Erstellen Sie ein neues übergeordnetes Element, das drei untergeordnete Elemente enthält: left, main, right (beachten Sie, dass main vorne steht, sodass die Mitte zuerst geladen wird, wenn das Seite wird gerendert. Bei Interviewfragen laden Sie zuerst den mittleren Teil)

Stileinstellungen

1. Legen Sie die Höhe des übergeordneten Elements fest
2. Stellen Sie die drei Elemente auf schwebend ein
3. Der mittlere Hauptteil hat eine feste Breite von 100 %: Breite: 100 %, stellen Sie die Breite und Höhe auf der linken und rechten Seite entsprechend den Produktanforderungen ein
4. Fügen Sie eine Box innen zum Hauptteil hinzu Mitte, um den Inhalt zu platzieren (anders als beim Holy Grail-Layout)
5. Rand links auf der linken Seite festlegen: -100 %; Rand rechts auf der rechten Seite festlegen: -rechte Feldbreite
6. Fügen Sie eine neue hinzu box, inner, linke und rechte Polsterung oder Ränder festlegen

<div class="container">
   <div class="main f">
      <div class=inner>go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
   </div>
   <div class="left f"></div>
   <div class="right f"></div>
</div>
<style>
  .container {
     height: 300px;
  }
  .f {
     float: left;
  }
  .main {
     width: 100%;
     height: 300px;
     background-color: cornflowerblue;
  }
  .left {
     width: 200px;
     height: 300px;
     background-color: indianred;
     margin-left: -100%;
  }
  .right {
     width: 200px;
     height: 300px;
     background-color: lightgreen;
     margin-left: -200px;
  }
  .inner {
    padding: 0 200px 0 200px;
  }
</style>

self-floating

HTML-Struktureinstellungen

Erstellen Sie drei neue Elemente: left, right, main (note, main steht am Ende)

Stileinstellungen

1. Das linke Feld schwebt nach links und das rechte Feld schwebt nach rechts
2. Legen Sie den Rand- oder Füllwert im mittleren Teil fest

<div class="left"></div>
<div class="right"></div>
<div class="main">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
<style>
    .main {
        margin: 0 200px 0 200px;
        background-color: red;
        height: 200px;
    }
    .left {
        float: left;
        width: 200px;
        background-color: blue;
        height: 200px;
    }
    .right {
        float: right;
        width: 200px;
        background-color: pink;
        height: 200px;
    }
</style>

Neue CSS3-Funktion: Flex

HTML-Struktureinstellung

Erstellen Sie ein neues übergeordnetes Element, einschließlich drei untergeordneter Elemente: left, main , right (Hinweis: main wird in geschrieben Mitte)

Stilstileinstellung

1. Stellen Sie die Breite des übergeordneten Elements auf 100 % ein, Anzeige: Flex
2. Die linke und rechte Seite entsprechen den Produktanforderungen Breite und Höhe
3. Stellen Sie den Flex im Mittelteil ein: 1;

<div class="container">
  <div class="left"></div>
  <div class="main">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
  <div class="right"></div>
</div>
<style>
    .container {
       width: 100%;
       height: 200px;
       display: flex;
   }
   .main {
       flex: 1;
       background-color: red;
       height: 200px;
   }
   .left {
       width: 200px;
       background-color: blue;
       height: 200px;
   }
   .right {
       width: 200px;
       background-color: pink;
       height: 200px;
   }
</style>

Es gibt noch andere Schreibweisen, deshalb werde ich hier nicht näher darauf eingehen, sondern nur einige der am häufigsten verwendeten diejenigen und diejenigen, die in Vorstellungsgesprächen gefragt werden können. CSS3 verfügt außerdem über viele interessante Funktionen, die es wert sind, während der Arbeit und im Studium eingehend studiert zu werden.

Feste linke und rechte Seite in der Mitte sind adaptiv

Floating + negative Ränder (Holy Grail-Layout)

HTML-Struktureinstellungen

Erstellen Sie ein neues übergeordnetes Element, einschließlich drei untergeordneter Elemente: links, Hauptelement, rechts (Hinweis: Hauptelement steht in der Mitte)

Stileinstellungen

1 Die Seiten nehmen jeweils 50 % der Breite ein
2 , Der linke negative Rand margin-left macht die Hälfte der Breite des mittleren p aus
3. Der rechte negative Rand margin-right macht auch die Hälfte der Breite aus das mittlere p

 <div class="container">
   <div class="left"></div>
   <div class="main">我是中间内容</div>
   <div class="right"></div>
 </div>
 <style>
    .main {
        width: 100px;
        text-align: center;
        float: left;
        background-color: lightgreen;
        height: 300px;
    }
    .left {
        height: 300px;
        float: left;
        width: 50%;
        margin-left: -50px;
        background-color: pink;
    }
    .right {
        height: 300px;
        float: right;
        width: 50%;
        margin-right: -50px;
        background-color: cornflowerblue;
    }
 </style>

Neue CSS3-Funktion: Flex

HTML-Struktureinstellungen

Erstellen Sie ein neues übergeordnetes Element, einschließlich drei untergeordneter Elemente: links, Haupt, rechts

Stilstileinstellungen

1. Anzeige der übergeordneten Elementeinstellungen: flex-direction: row; 🎜>

 <div class="container">
   <div class="left"></div>
   <div class="main">我是中间内容</div>
   <div class="right"></div>
 </div>
 <style>
    .container {
        display: flex;
        flex-direction : row;
    }
    .main {
        width: 200px;
        height: 300px;
        text-align: center;
        background-color: lightgreen;
    }
    .left {
        height: 300px;
        flex-grow: 1;
        background-color: pink;
    }
    .right {
        height: 300px;
        flex-grow: 1;
        background-color: cornflowerblue;
    }
 </style>

wird zur dynamischen Berechnung des Längenwerts verwendet. Es ist zu beachten, dass vor und nach dem Operator ein Leerzeichen reserviert werden muss, zum Beispiel: width: calc(100% - 50px).

HTML-Struktureinstellungen

Erstellen Sie ein neues übergeordnetes Element, einschließlich drei untergeordneter Elemente: links, Hauptelement, rechts

Stileinstellungen

1 Einstellungen 100 % Breite;

 <div class="container">
   <div class="left"></div>
   <div class="main">我是中间内容</div>
   <div class="right"></div>
 </div>
 .container {
     width: 100%;
     height: 300px;
 }
 .f {
     float: left;
 }
 .main {
     width: 100px;
     text-align: center;
     background-color: lightgreen;
     height: 300px;
 }
 .left {
     height: 300px;
     background-color: pink;
     width: calc(50% - 50px);  /*平分中间部分的宽度*/
 }
 .right {
     height: 300px;
     background-color: cornflowerblue;
     width: calc(50% - 50px);  /*平分中间部分的宽度*/
 }

Das obige ist der detaillierte Inhalt vonZusammenfassung der Implementierungsmethoden des dreispaltigen CSS-Layouts (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!