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:

I am Left< ;/div>

Ich bin in der Mitte

Ich bin rechts

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;

Die linke Seite ist adaptiv, die mittlere rechte Seite hat eine feste Breite:

Es ist dasselbe wie die linke mittlere feste Breite und die rechte Seite ist adaptiv. Natürlich ist die Prämisse so dass die drei Objekte a, b, c die Reihenfolge im HTML-Strukturcode ändern. Die Interpretationsreihenfolge des Browsers sollte c-b-a sein, da Floating vor Unfloating kommt:

i Es ist das linke

Ich bin in der Mitte

Ich bin rechts

Der CSS-Code lautet wie folgt:

#a{background:#aaa ;}

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

Ich bin auf der linken Seite

< ;div id="box">

Ich bin in der Mitte

Ich bin rechts

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:

Ich bin auf der linken Seite

< div id="c">Ich bin rechts

Ich bin in der Mitte

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