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 :