Heim >Web-Frontend >CSS-Tutorial >CSS-Layout schwebend (2)
Im vorherigen Artikel habe ich über zweispaltiges Floating mit fester Breite auf der linken (rechten) Seite und automatische Skalierung auf der rechten (linken) Seite geschrieben. In diesem Artikel geht es um das Problem des dreispaltigen Floatings. Wie bereits erwähnt, ist das Zwei-Spalten-Floating die Grundlage für andere Mehrspalten-Floating. Nachdem man das Prinzip des Zwei-Spalten-Floatings verstanden hat, wird das Mehrspalten-Floating von drei oder mehr Spalten einfach.
Die mittlere linke Seite hat eine feste Breite und die rechte Seite ist adaptiv:
Da die linke Seite und die mittlere Seite beide eine feste Breite haben und nur die rechte Seite adaptiv ist, Der dreispaltige Float ist also das gleiche Prinzip wie die linke feste Breite und die rechte adaptive Breite beim zweispaltigen Float. Der HTML-Strukturcode lautet wie folgt:
Fließen Sie einfach den CSS-Stilcode in den beiden Spalten Nehmen Sie geringfügige Änderungen vor:
#a{float:left; background:#aaa;}
#b{float:left;
background:#f00;
#b{float:right; width:200px; Hintergrund: #f00; 🎜>Dieses Layout sollte am häufigsten verwendet werden, da die Breite der Seitenleisten auf beiden Seiten festgelegt ist und der Inhaltsbereich in der Mitte adaptiv ist. Dies ist eine gängige Layoutmethode für viele Websites. Viele Leute werden hier vier DIVs verwenden, um das Layout zu vervollständigen, nämlich:
Verwenden Sie ein verschachteltes DIV, um das dreispaltige Floating zu vervollständigen , Dies kann zwar den Zweck eines schwebenden Layouts erreichen, aber es kann immer noch den Zweck eines dreispaltigen Schwebens ohne diese Verschachtelung erreichen. Da eine Verschachtelung weggelassen werden kann, warum nicht eine weglassen? Ändern Sie einfach die Reihenfolge von b und c, um das Ziel zu erreichen:
Der CSS-Code lautet wie folgt:
#a{float:left; Breite:200px; Hintergrund:#aaa;}
#b{margin-left:200px;
margin-right:200px; Hintergrund:#f00;}
#c{float:right;
Hintergrund:#777;}
Auf diese Weise wird basierend auf dem zweispaltigen Floating-Layout auch das dreispaltige Floating-Layout vervollständigt.
Das Obige ist der Inhalt des CSS-Layout-Floating (2). Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn)!