Beispiele für die CSS-Implementierung verschiedener Spaltenlayouts auf der Seite

In diesem Artikel werden hauptsächlich Beispiele für Methoden zum Implementieren eines einspaltigen Layouts, eines zweispaltigen Layouts und eines dreispaltigen Layouts mithilfe von CSS vorgestellt, einschließlich Beispielen für adaptive Breite und Höhe:

1. Einspaltiges Layout (auch einspaltiges Layout genannt)
Einspaltiges Layout erfordert die Beherrschung von drei Wissenspunkten: Standarddokumentfluss, der Elemente auf Blockebene und Elemente auf Zeilenebene umfasst , sowie Randattribute, sozusagen Der Schlüsselcode zum Implementieren eines Spaltenlayouts wird durch die Einstellung horizontale Zentrierung erreicht: 0 auto; bedeutet, dass die Ränder auf beiden Seiten automatisch festgelegt werden auf die Breite des Browsers. Um den Rand festzulegen, benötigen Sie zunächst ein Boxmodell, wie hier das Div, und stellen dann dessen Länge und Breite auf eine feste Größe ein, um eine Zentrierung zu erreichen.

<style type="text/css">
    body{margin:0;padding:0;}
    .head{heigth:200px;background:blue;}
    .main{height:500px;width:800p;margin:0 auto;}
    .footer{background:blue;height:200px;width:800px;margin:0 auto;}
</style>
<div class="head"> This is head !</div>
<div class="main"> This is main !</div>
<div class="footer"> This is footer !</div>

2. Zweispaltiges Layout (zwei Spalten adaptiv)
Floating:
Elemente auf Blockebene werden Zeile für Zeile angeordnet, und es müssen zwei Blöcke sein Wenn horizontale Elemente nebeneinander angeordnet sind, müssen Sie das Floating-Layout Float in CSS verwenden. Float hat drei Attributwerte:
Links-Links-Floating, Rechts-Rechts-Floating, Keine-Nicht-Float , die Elemente werden entsprechend verschoben. Bewegen Sie es nach links oder rechts, bis es den Rand des Containers erreicht.
Wenn das Element keinen Inhalt hat, aber das Floating-Attribut festgelegt ist, ändert sich die Breite des Elements mit der Änderung des Inhalts.
Die übliche Methode zum Löschen von Floats ist: Clear: Both; (Einstellung für Elemente, die gelöscht werden müssen.) Um sicherzustellen, dass der Float klar ist, gibt es eine andere Möglichkeit, Floats zu löschen: width:100%;overflow:hidden;

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:20%;height:500px;background:blue;float:left;}
    .right{width:80%;background:red;height:500px;float:right;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="right"> This is right !</div>
</div>

Nach dem Hinzufügen des übergeordneten Div sind die rechten und linken Blöcke auf das übergeordnete Element beschränkt Die Breite des übergeordneten Blocks ist festgelegt, sodass auch die Breite des linken und rechten Blocks festgelegt ist. Wenn sich jedoch die Breite des übergeordneten Blocks ändert, ändern sich auch die linken und rechten Blöcke entsprechend 2:8. Dies ist behoben.

3. Dreispaltiges Layout
Position kann 4 Attributwerte festlegen, nämlich: statisch (statische Positionierung), relativ (relative Positionierung), absolut (absolute Positionierung), fest ( Feste Positionierung)
Für die Anpassung des dreispaltigen Layouts ändern Sie einfach den Anteil im obigen zweispaltigen Layout auf 33,33 %. Analog dazu kann auch die Anpassung des vierspaltigen Layouts die gleiche Methode verwenden, um die Anteilsverteilung anzupassen. So erreichen Sie das gewünschte Layout.

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:33.33%;height:500px;background:blue;float:left;}
    .middle{width:33.33%;height:500px;background:black;float:left;}
    .right{width:33.33%;background:red;height:500px;float:right;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="middle"> This is middle !</div>
    <div class="right"> This is right !</div>
</div>

Eine andere Situation besteht darin, dass die Breite des linken und rechten Blocks auf 200 Pixel bzw. 300 Pixel festgelegt ist, während die Breite des mittleren Blocks adaptiv ist. In diesem Fall kann dies nicht durch Float erreicht werden. Zu diesem Zeitpunkt müssen wir den linken und rechten Block absolut positionieren und dann den Rand des mittleren Blocks festlegen, um die Anforderung zu erfüllen. Wenn Sie möchten, dass die mittleren und linken und rechten Teile nicht eng zusammenpassen, können Sie die Pixel beim Festlegen des Rands (oben, rechts, unten, links) entsprechend erhöhen. Die Implementierungsmethode ist wie folgt:
Hinweis links:0;oben:0;rechts:0;oben:0; Wenn sie nicht hinzugefügt werden, treten Probleme auf.

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:200px;height:500px;background:blue;position:absolute;left:0;top:0;}
    .middle{height:500px;background:black;margin:0 300px 0 200px;}
    .right{width:300px;background:red;height:500px;position:absolute;right:0;top:0;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="middle"> This is middle !</div>
    <div class="right"> This is right !</div>
</div>

auf der Webseite Im Design mischen wir meistens die oben genannten Layoutmethoden, z. B. das Einfügen eines zweispaltigen oder dreispaltigen Layouts in den Hauptblock eines einspaltigen Layouts. Der Code ist im Grunde der gleiche wie oben

Verwendung des BFC-Prinzips zur Implementierung
Eine der Regeln von BFC ist, dass sich der BFC-Bereich nicht mit der Float-Box überschneidet, sodass wir dies zur Implementierung einer 3-Spalte verwenden können Layout.

Der CSS-Code lautet wie folgt

.left {   
  float: left;   
  margin-right: 10px;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
}   
.rightright {   
  float: rightright;   
  margin-left: 10px;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
}   
.main {   
  height: 100px;   
  background-color: green;   
  overflow: hidden;   
}

Der HTML-Code lautet wie folgt

<div class="left"></div>  
<div class="right"></div>  
<div class="main"></div>

Doppeltes Nurflügel-Layout
Dies Das Layoutschema wurde zuerst von Taobao vorgeschlagen, hauptsächlich damit die Hauptspalte zuerst geladen werden kann.
Implementierungsprinzip:
(1) Fügen Sie einen Wrap außerhalb der Hauptspalte hinzu, wickeln Sie die Hauptspalte ein und schweben Sie die beiden Unterspalten nach links.
(2) Stellen Sie die Umbruchbreite der Hauptspalte auf 100 % und den linken Rand der Unterspalte auf einen negativen Wert ein, damit die Unterspalten auf der linken und rechten Seite angeordnet werden können.
(3) Dies liegt daran, dass der linke und rechte Rand der Hauptspalte etwas größer sind als die Breite der linken und rechten Spalte. Sie können den Abstand zwischen der Hauptspalte und der Unterspalte festlegen.

Der CSS-Code lautet wie folgt

.wrap {   
  width: 100%;   
}   
.wrap::after {   
  display: block;   
  content: '';   
  font-size: 0;   
  height: 0;   
  clear: both;   
  zoom: 1;   
}   
.main-content {   
  float: left;   
  width: 100%;   
}   
.main {   
  height: 100px;   
  background-color: green;   
  margin-left: 110px;   
  margin-right: 110px;   
}   
.left {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100%;   
}   
.rightright {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100px;   
}

Der HTML-Code lautet wie folgt

<div class="wrap">  
  <div class="main-content">  
    <div class="main"></div>  
  </div>  
  <div class="left"></div>  
  <div class="right"></div>  
</div>

Heiliges Gral-Layout
Heiliger Gral Das Layout ist strukturell einfacher. Sie können auch die Hauptspalte zuerst laden lassen.
Implementierungsprinzip:
(1) Fügen Sie eine Umbruchbox hinzu, legen Sie den Wert für padding-leftpadding-right fest und stellen Sie die Breite einer Lücke größer als die Breite der Unterspalte ein.
(2) Die Hauptspalte und die Unterspalte sind auf float: left eingestellt, der linke Rand der linken Unterspalte ist auf -100 % eingestellt und auf position: left: -110px gesetzt die linke Unterspalte nach links. Das Gleiche gilt für die rechte Spalte.
(3) Die Breite der Hauptspalte muss lediglich auf 100 % eingestellt werden. Stellen Sie die Breite des Paketkastens nicht auf 100 % ein, sondern passen Sie sie einfach an.

CSS-Code lautet wie folgt

.wrapper {   
  padding-left: 110px;   
  padding-right: 110px;   
  overflow: hidden;   
}   
.main {   
  float: left;   
  width: 100%;   
  height: 100px;   
  background-color: #ccc;   
}   
.left {   
  float: left;   
  width: 100px;   
  height: 100px;   
  margin-left: -100%;   
  position: relative;   
  left: -110px;   
  _left: 0;   
  background-color: orange;   
}   
.rightright {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100px;   
  position: relative;   
  rightright: -110px;   
}

HTML-Code lautet wie folgt

<div class="wrapper">  
  <div class="main"></div>  
  <div class="left"></div>  
  <div class="right"></div>  
</div>