Tutoriel d'introduction à la mise en page Web CSS 8 : Tutoriel adaptive_Basic sur trois colonnes de largeur de colonne centrale flottante

En utilisant la méthode de positionnement flottant, la largeur fixe et l'adaptation d'une colonne à plusieurs colonnes peuvent être réalisées facilement, y compris la largeur fixe de trois colonnes. Ici, on nous donne une nouvelle exigence. Nous espérons avoir une disposition à trois colonnes. La colonne de gauche dans la base nécessite une largeur fixe et est affichée à gauche. La colonne de droite nécessite une largeur fixe et est affichée à droite. la colonne du milieu doit être entre la colonne de gauche et la colonne de droite. Le milieu de la colonne de droite s'adapte automatiquement en fonction du changement d'espacement entre les colonnes de gauche et de droite. Cela met en avant une nouvelle exigence de mise en page, et cela ne peut pas être réalisé simplement en utilisant des attributs float et des attributs de pourcentage. CSS ne prend actuellement pas en charge les calculs de pourcentage suffisamment précis pour prendre en compte l'espace occupé par les colonnes de gauche et de droite. utilisez 100 % pour la colonne du milieu. Pour la largeur, il utilisera la largeur de la fenêtre du navigateur au lieu de l'espacement du milieu entre la colonne de gauche et la colonne de droite, nous devons donc repenser ce problème.

Positionnement absolu
Avant de commencer une telle mise en page à trois colonnes, il est nécessaire de comprendre une nouvelle méthode de positionnement : le positionnement absolu. La méthode de positionnement flottant précédente permet principalement au navigateur d'ajuster automatiquement la direction du flottement en fonction du contenu de l'objet. Cependant, lorsque cette méthode ne peut pas répondre aux exigences de positionnement, une nouvelle méthode est nécessaire pour y parvenir. CSS fournit une autre méthode en plus du positionnement flottant. . La méthode de positionnement est le positionnement absolu, obtenu à l'aide de l'attribut position.

position Utilisé pour définir la méthode de positionnement des objets. Valeurs disponibles : statique/absolue/relative

Pour chaque objet de la page, l'attribut de position par défaut est statique.
Si l'objet est défini sur position:absolute, l'objet sera repositionné en fonction de la position de la page entière. Lorsque vous utilisez cet attribut, vous pouvez utiliser top, right, bottom, left, qui sont les valeurs de distance. ​​dans les quatre directions haut, droite, bas et gauche Pour déterminer la position spécifique de l'objet, consultez le CSS suivant :

#layout {
position:absolute; :20px;
left:0px;
}
if# Si la mise en page utilise position:absolute;, elle deviendra en même temps un mode de positionnement absolu, lors de la définition de top:20px;. soyez toujours à 20 px du haut de la fenêtre du navigateur, et left:0px; garantira qu'il est éloigné de la marge gauche du navigateur est de 0 px.

Remarque : si un objet est défini sur position:absolute; il sera essentiellement séparé des autres objets. Son mode de positionnement n'affectera pas les autres objets, ni ne sera affecté par le positionnement flottant des autres objets. en un sens, après avoir utilisé le positionnement absolu, l'objet flotte sur la page Web comme un calque.

Une fois l'objet positionné de manière absolue, sa relation flottante avec la page ne sera plus prise en compte. Il vous suffit de définir les valeurs des directions haut, droite, bas et gauche de l'objet.

Dans ce cas, utiliser le positionnement absolu peut résoudre le problème que nous avons bien soulevé. De même, utilisez 3 divs pour former notre structure à trois colonnes :

Copiez le code Le code est le suivant :

#left {
couleur d'arrière-plan : #E8F5FE ;
bordure : 1px solide #A9C9E2
hauteur : 400px ;
largeur : 200px ; ;
haut : 0px;
gauche : 0px;
#right {
couleur d'arrière-plan :
bordure : 1px solide #F9B3D5
hauteur : 4 00px ;
width: 200px;
position: absolue;
top: 0px;
right: 0px;


De cette façon, la gauche; la colonne sera affichée à gauche en partant de la gauche :0px; sera affichée contre le bord gauche et la colonne de droite sera affichée par right: 0px afin que la colonne de droite soit affichée à partir de la droite et que le #center au milieu soit affiché. utilisez le style CSS ordinaire :

Copier le code

Le code est le suivant : #center { couleur d'arrière-plan : #F2FDDB ;

bordure : 1px solide # A5CF3D ;

hauteur :
marge droite : 202px ; >}


Pour #center, nous n'avons pas besoin de définir sa méthode flottante. Nous devons seulement lui laisser une marge gauche et toujours conserver la largeur de #lef et #right. Cela permet d'obtenir une largeur adaptative de 202 px des deux côtés. , et les marges gauche et droite sont La distance entre les deux côtés est juste suffisante pour que #left et #right soient affichés dans cet espace, répondant ainsi à l'exigence.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Trois colonnes de largeur fixe gauche et droite milieu adaptatif-AA25.CN</title> <style> body{ margin:0px; } #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; height: 400px; width: 200px; position: absolute; top: 0px; left: 0px; } #center { background-color: #F2FDDB; border: 1px solid #A5CF3D; height: 400px; margin-right: 202px; margin-left: 202px; } #right { background-color: #FFE7F4; border: 1px solid #F9B3D5; height: 400px; width: 200px; position: absolute; top: 0px; right: 0px; } </style> <div id="left">Colonne de gauche</div> <div id="center">Colonne du milieu</div>