Tout d'abord, cliquez ici pour voir l'effet réel du fonctionnement. Cette page peut être centrée et hautement adaptative dans les navigateurs Mozilla, Opera et IE. Analysons le code :
Code complet
<html>
<tête>
<style type="text/css">
corps{
arrière-plan : #999 ;
texte-align:centre;
couleur : #333 ;
famille de polices : arial, verdana, sans-serif ;
}
#en-tête{
largeur : 776 px ;
marge droite : auto ;
marge gauche : auto ;
remplissage : 0px ;
arrière-plan : #EEE ;
hauteur : 60 px ;
texte-align:gauche;
} #contenir{
marge droite : auto ;
marge gauche : auto ;
largeur : 776 px ;
} #mainbg{
largeur : 776 px ;
remplissage : 0px ;
arrière-plan : #60A179 ;
flotteur : gauche ;
}
#droite{
flotteur : à droite ;
marge : 2px 0px 2px 0px ;
remplissage : 0 px ;
largeur : 574 px ;
arrière-plan : #ccd2de ;
texte-align:gauche;
}
#gauche{
flotteur : gauche ;
marge : 2px 2px 0px 0px ;
remplissage : 0px ;
arrière-plan : #F2F3F7 ;
largeur : 200 px ;
texte-align:gauche;
}
#pied de page{
clair : les deux ;
largeur : 776 px ;
marge droite : auto ;
marge gauche : auto ;
remplissage : 0px ;
arrière-plan : #EEE ;
hauteur : 60 px ;}
.text{marge:0px;padding:20px;}
</style>
</tête>
<corps>
<div id="header">en-tête</div>
<div id="contain">
<div id="mainbg">
<div id="right">
<div
class="text">droite<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div >
</div>
<div id="gauche">
<div class="text">gauche</div>
</div>
</div>
</div>
<div id="footer">pied de page</div>
</corps>
</html>
Définissez ensuite les deux colonnes du milieu #right et #left. Afin de centrer les deux colonnes du milieu, nous imbriquons un calque #contain à l'extérieur d'elles et définissons margin:auto; sur contain, de sorte que #right et #left soient naturellement centrés.
Faites attention à l'ordre de définition des deux colonnes du milieu. Nous définissons d'abord #right et le laissons flotter sur le côté le plus à droite du calque #contain via float: right;. Définissez ensuite #left et laissez-le flotter à gauche du calque #right via float: left;. C'est exactement l'inverse de l'ordre dans lequel nous avons défini le tableau de gauche à droite (Correction : gauche d'abord puis droite, ou d'abord droite puis gauche, vous pouvez le concevoir selon vos propres besoins).
On voit qu'il y a une couche #mainbg imbriquée entre #contain et les deux colonnes du code. A quoi sert cette couche ? Ce calque est utilisé pour définir l'arrière-plan de #contain. Vous vous demanderez certainement pourquoi ne pas définir l’arrière-plan directement dans #contain, mais ajouter un autre calque ? En effet, l'arrière-plan défini directement dans #contain ne sera pas affiché dans Mozilla et la valeur de la hauteur doit être définie. Si une valeur de hauteur est définie, le calque #right ne peut pas être automatiquement mis à l'échelle en fonction du contenu. Afin de résoudre les problèmes d'arrière-plan et de hauteur, il est nécessaire d'ajouter un tel calque #mainbg. L'astuce consiste à définir float: left; pour le calque #mainbh, car float donne automatiquement les attributs de largeur et de hauteur du calque. (Comprenons-le de cette façon pour le moment :)
Enfin, définissez le calque #footer en bas. La clé de cette définition est : clear:both;. La fonction de cette phrase est d'annuler l'héritage flottant du calque #footer. Sinon, vous verrez #footer affiché à côté de #header au lieu de sous #right.
Une fois les couches principales définies, la mise en page est prête. Un point supplémentaire : vous avez vu que j'ai également défini un .text{margin:0px;padding:20px;} La fonction de cette classe est de créer une marge de 20px autour du contenu. Pourquoi ne pas définir margin ou padding directement dans #right ? Parce que Mozilla et IE ont des interprétations incohérentes du modèle de boîte CSS, définir directement margin/padding entraînera une déformation de la mise en page dans Mozilla. Je résous généralement le problème en mettant une autre couche à l'intérieur.