Disposition adaptative typique à trois lignes et deux colonnes centrées en hauteur

Table des matières

Code complet

Analyse du code

Maison

interface Web

tutoriel CSS

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

May 16, 2016 pm 12:12 PM

Comment centrer l'ensemble du contenu de la page et comment redimensionner automatiquement la hauteur pour s'adapter au contenu. C'est le problème le plus courant lors de l'apprentissage de la mise en page CSS. Un exemple pratique est donné ci-dessous et expliqué en détail. (L'expérience et l'expérience contenues dans cet article sont le résultat de discussions entre xpoint et guoshuang sur le Blue Ideal Forum.)

Tout d'abordCliquez ici pour voir l'effet d'exécution réel Cette page peut être centrée et hautement adaptative dans les navigateurs Mozilla, Opera et IE. Analysons le code :

Code complet

<html>
<head>
<style type="text/css">
corps{
arrière-plan :#999;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
}
#header{
width:776px;
marge-droite : auto;
marge-gauche : auto;
padding : 0px;
arrière-plan : #EEE;
hauteur :60px;
text-align:left;
} #contain{
margin-right: auto;
margin-left: auto;
width: 776px;
} #mainbg{
width:776px;
padding: 0px ;
arrière-plan : #60A179;
float : gauche;
}
#right{
float : droite;
marge : 2px 0px 2px 0px;
padding:0px;
largeur : 574px ;
arrière-plan : #ccd2de;
text-align:left;
}
#left{
float : gauche
marge : 2px 2px 0px 0px; ;
remplissage : 0px;
arrière-plan : #F2F3F7;
largeur : 200 px;
text-align:left;
}
#footer{
clear:both;
largeur:776px;
marge-droite: auto;
marge-gauche: auto;
remplissage: 0px;
arrière-plan: #EEE;
hauteur:60px;}
.text{margin:0px;padding:20px;}
</style>
</head>
<body>
<div id="header">header< /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="left">
<div class="text">left</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>

Analyse du code

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

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.

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn