Disposition adaptative typique à trois lignes et deux colonnes centrées en hauteur_CSS/HTML

Analyse du code

Nous définissons d'abord le corps et la première ligne en haut de l'#header. La clé ici est le text-align:center; dans le corps et le margin-right: auto;margin. - dans l'en-tête à gauche : auto;, ces deux phrases centrent l'en-tête. Remarque : En fait, la définition de text-align:center; permet déjà le centrage dans IE, mais elle n'est pas valide dans Mozilla. Vous devez définir margin:auto pour obtenir le centrage dans Mozilla.

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 dans le 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 le calque #mainbh float: left;, car float donne automatiquement les attributs de largeur et de hauteur du calque. (Comprenons-le ainsi 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 calques principaux définis, 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.