Implementierung eines zentrierten Layouts des div-Moduls ohne float_Experience-Austausch

Die gebräuchlichste div+css-Webseitenlayoutform: oben, Mitte links, Mitte rechts und unten vier Module mit einer Breite von 760 Pixeln, und die gesamte Seite ist zentriert.

Strukturcode, oben links, rechts, vier Module sind alle unabhängig und nicht ineinander verschachtelt.

＜div id="top"＞head＜/div＞

＜div id="left"＞
＜div id="left_module"＞left＜/div＞
＜/div＞

＜div id="right"＞
＜div id="right_module"＞right＜/div＞
＜/div＞

＜ div id="foot" ＞foot＜/div＞

Oben ist eine reguläre Definition.

#top { height:100px; width:760px; width:auto; text-align:center;}

Die äußere linke Seite ist als 760px breit definiert und zentriert; das innere left_module ist als die tatsächliche linke Breite von 280 Pixel definiert und absolut positioniert, und der obere Wert entspricht der oben definierten Höhe.
Der Vorteil dieser Methode besteht darin, dass die beiden Modulcode-Schnipsel links und rechts ausgetauscht werden können, um die Anzeigepriorität anzupassen.

#left { width:760px; margin:auto;}
#left_module { width:280px; top:100px;}

Methode B: Das äußere linke Modul ist als 760 Pixel breit und zentriert definiert, relativ zur Oberseite schwebend; das innere left_module ist als die tatsächliche linke Breite von 280 Pixel definiert und absolut positioniert.
Der Vorteil dieser Methode besteht darin, dass die Höhe der Platte frei erweitert werden kann.

#left { width:760px; margin:auto; position:relative;}

Outer right It ist als 760 Pixel breit und zentriert definiert, und das innere right_module ist als die tatsächliche rechte Breite von 440 Pixel definiert, wobei die Margin-Syntax verwendet wird, um es links zu positionieren. Die durch right_module definierte Hintergrundfarbe ist die Hintergrundfarbe der tatsächlichen rechten Seite, und die definierte Höhe ist die tatsächliche Höhe des mittleren Moduls; die Hintergrundfarbe von right ist die Hintergrundfarbe der tatsächlichen linken Seite.

#right { width:760px; border:#E8E8E8;}
#right_module { width:440px; height:360px; padding :10px;}

Der Boden gehört ebenfalls zur allgemeinen Definition.

#foot { height:100px; width:760px; width:auto; text-align:center;}

Testumgebung IE6.0 und FF1.5 Es handelt sich um die vulgärste Syntax. Sie ist sehr einfach und nur begrenzt praktikabel. Sie kann als technische Referenz verwendet werden.