Implémentation de la disposition centrale du module sans float_CSS/HTML

Obtenez une disposition de module centrée sans float_CSS/HTML

Le formulaire de mise en page le plus courant et le plus pratique : haut, centre gauche, centre droit et quatre modules en bas, largeur 760px, page globale centrée.

Code structure, pied haut gauche droit Les quatre modules sont tous indépendants et non imbriqués les uns dans les autres.

＜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＞

La partie supérieure appartient à la définition générale.

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

Méthode A : La partie extérieure gauche est définie comme ayant une largeur de 760 px et centrée ; le module gauche intérieur est défini comme la largeur gauche réelle de 280 px, et est positionné de manière absolue, et la valeur supérieure est égale à la hauteur. défini en haut.
L'avantage de cette méthode est : les extraits de code des deux modules gauche et droit peuvent être interchangés pour ajuster la priorité d'affichage.

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

Méthode B : la partie extérieure gauche est définie comme ayant une largeur de 760 px et centrée, flottant par rapport au haut ; le module gauche intérieur est défini comme ayant une largeur gauche réelle de 280 px et positionné de manière absolue.
L'avantage de cette méthode est : la hauteur du plateau peut être étendue librement.

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

L'extérieur droit est défini comme ayant une largeur de 760 px et centré, et le module_droit intérieur est défini comme la largeur réelle droite de 440 px, en utilisant la syntaxe de marge pour être centré sur la gauche. La couleur d'arrière-plan définie par right_module est la couleur d'arrière-plan du côté droit réel, et la hauteur définie est la hauteur réelle du module central ; la couleur d'arrière-plan de right est la couleur d'arrière-plan du côté gauche réel ;

#right { width:760px; margin:auto; background:#E8E8E8;}
  #right_module { width:440px; background:#F0F0F0; height:360px; margin:0 0 0 auto; padding:10px;}

Le bas relève également de la définition conventionnelle.

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

Les environnements de test IE6.0 et FF1.5 ont la syntaxe la plus vulgaire, qui est très simple et a une praticité limitée. Elle peut être utilisée comme référence technique.

Ce qui précède est le contenu de l'implémentation du centre de module layout_CSS/HTML sans float. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn). !