Implémentation d'une disposition centrée du module div sans échange float_Experience

Le formulaire de mise en page de page Web div+css le plus courant : quatre modules en haut, au centre gauche, au centre droit et en bas, avec une largeur de 760 px, et la page globale est centrée.

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

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

Le sommet est une définition régulière.

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

Méthode A : L'extérieur gauche est défini comme ayant une largeur de 760 px. et Centré ; 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éfinie en haut.
L'avantage de cette méthode est que les deux extraits de code du module gauche et droit peuvent être interchangés pour ajuster la priorité d'affichage.

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

Méthode B : L'extérieur gauche est défini comme ayant une largeur de 760 px et centré, 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:10px;}

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 du côté droit de 440 px, en utilisant la syntaxe de marge à 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:#F0F0F0; margin:0 0 0 auto; :10px;}

Le bas appartient également à la définition générale.

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

Environnement de test IE6.0 et FF1.5, tous deux C'est la syntaxe la plus vulgaire, elle est très simple et son caractère pratique est limité. Elle peut être utilisée comme référence technique.