Implementierung des Modulcenter-Layouts ohne float_CSS/HTML

Erzielen Sie ein zentriertes Modullayout ohne float_CSS/HTML

Die gebräuchlichste und praktischste Layoutform: oben, Mitte links, Mitte rechts und unten vier Module, Breite 760 Pixel, Gesamtseite zentriert.

Strukturcode, oben links, rechter Fuß Die vier Module sind alle unabhängig und nicht ineinander verschachtelt.

＜p id="top"＞head＜/p＞
＜p id="left"＞  ＜p id="left_module"＞left＜/p＞＜/p＞
＜p id="right"＞  ＜p id="right_module"＞right＜/p＞＜/p＞
＜p id="foot" ＞foot＜/p＞

Der obere Teil gehört zur allgemeinen Definition.

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

Methode A: Das äußere linke Modul ist als 760 Pixel breit und zentriert definiert; das innere left_module ist als die tatsächliche linke Breite von 280 Pixel definiert und absolut positioniert, und der obere Wert entspricht der Höhe oben definiert.
Der Vorteil dieser Methode ist: Die Codeschnipsel der beiden Module links und rechts können ausgetauscht werden, um die Anzeigepriorität anzupassen.

#left { width:760px; margin:auto;}
  #left_module { width:280px; position:absolute; top:100px; padding:10px;}

Methode B: Das äußere linke Modul ist als 760 Pixel breit und zentriert definiert, das innere left_module ist als die tatsächliche linke Breite von 280 Pixel definiert und absolut positioniert.
Der Vorteil dieser Methode ist: Die Höhe der Platte ist frei erweiterbar.

#left { width:760px; margin:auto; position:relative;}
  #left_module { width:280px; position:absolute; padding:10px;}

Das äußere rechte 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 Randsyntax verwendet wird, um links zentriert zu sein. 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; margin:auto; background:#E8E8E8;}
  #right_module { width:440px; background:#F0F0F0; height:360px; margin:0 0 0 auto; padding:10px;}

Unten fällt ebenfalls unter die herkömmliche Definition.

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

Die Testumgebungen IE6.0 und FF1.5 haben die vulgärste Syntax, die sehr einfach und nur begrenzt praktikabel ist. Sie kann als technische Referenz verwendet werden.

Das Obige ist der Inhalt der Implementierung des Modulcenters layout_CSS/HTML ohne Float. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). !