Heim > Artikel > Web-Frontend > So implementieren Sie ein mehrspaltiges Layout mithilfe von CSS
Mehrere Möglichkeiten, mehrspaltiges Layout mit CSS zu implementieren
Wenn die folgenden drei ps in derselben Zeile angezeigt werden
<p > <p style="background-color:red">1</p> <p style="background-color:yellow">2</p> <p style="background-color:blue">3</p> </p>
1: float implementiert mehrspaltiges Layout
Das Float-Attribut steuert, ob und wie die Ziel-HTML-Komponente schwimmt. Nach dem Festlegen dieser Eigenschaft wird das Objekt als Blockkomponente behandelt.
Eine schwebende HTML-Komponente schwebt und folgt ihrem Vorgänger, bis sie auf einen Rand, einen inneren Patch, einen äußeren Patch oder einen anderen Block trifft.
p>p{ border:1px solid black; float:left; width:200px; height: 200px; text-align: center; }
2: Inline-Block-Box-Modell
Die Elemente des Inline-Block-Box-Modells belegen keine Reihe und es unterstützt auch die Angabe von Breite und Höhe mit Breite und Höhe.
Das Inline-Block-Box-Modell ist standardmäßig unten ausgerichtet, und Vertical-Align:Top kann seine Oberseite ausrichten.
p>p{ display:inline-block; border:1px solid black; text-align:center; width:200px; height: 200px; vertical-align: top; }
Inline-Block Es entsteht eine Lücke zwischen horizontal gerenderten Elementen, wenn sie in Zeilenumbrüchen oder durch Leerzeichen getrennt angezeigt werden. Entfernen Sie die Leerzeichen und die Lücken verschwinden auf natürliche Weise.
3: Anzeige: Flex Flexibles Layout
Flexibles FlexiblesLayout ist leistungsfähiger und kann kastenförmigen Modellen maximale Flexibilität bieten, um komplexe Layouts zu implementieren, die jeder Container kann als Flex-Layout bezeichnet werden.
Das Flex-Direction-Attribut bestimmt die Richtung der Hauptachse. Flex-Direction: Column ; Zeigt die vertikale Anordnung im übergeordneten Container an.
p{ display: flex; flex-direction: row; height:200px; width: 600px; } p>p{ border:1px solid black; }
Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein mehrspaltiges Layout mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!