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, dans l'espoir d'avoir une disposition à trois colonnes, dans laquelle la colonne de gauche nécessite une largeur fixe et est affichée à gauche, la colonne de droite nécessite une largeur fixe et est affichée à droite, et celle du milieu La colonne doit être située entre les colonnes de gauche et de droite. Le milieu de la colonne s'adapte automatiquement au 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 disposition à 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 est utilisé pour définir la méthode de positionnement de l'objet. Valeurs disponibles : statique/absolu/relatif.
Pour chaque objet de la page, la propriété de position par défaut est statique. Si vous définissez un objet sur position:absolute, l'objet sortira du flux de documents et sera repositionné en fonction de sa position sur l'ensemble de la page. Lorsque vous utilisez cet attribut, vous pouvez utiliser haut, droite, bas, gauche, c'est-à-dire les valeurs de distance dans les quatre directions haut, droite, bas et gauche, pour déterminer la position spécifique de l'objet. Voir ce qui suit. CSS :
#mise en page {
position : absolue ;
haut : 20 px ;
gauche :0px ;
}
Si #layout utilise position:absolute;, il deviendra le mode de positionnement absolu. En même temps, lors de la définition de top:20px;, il sera toujours à 20px du haut de la fenêtre du navigateur, tandis que left:0px; qu'il se trouve à l'écart du haut de la fenêtre du navigateur. 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, et il ne sera pas non plus affecté par le positionnement flottant des autres objets. positionnement, 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 :
#gauche {
couleur d'arrière-plan : #E8F5FE ;
bordure : 1px solide #A9C9E2 ;
hauteur : 400px ;
largeur : 200 px ;
position : absolue ;
haut : 0px ;
gauche : 0px ;
}
#droite {
couleur d'arrière-plan : #FFE7F4 ;
bordure : 1px solide #F9B3D5 ;
hauteur : 400px ;
largeur : 200 px ;
position : absolue ;
haut : 0px ;
à droite : 0px ;
}
De cette façon, la colonne de gauche sera affichée près du bord gauche par left: 0px;, tandis que la colonne de droite sera affichée par right: 0px; afin que la colonne de droite soit affichée depuis la droite, et le #center in le milieu utilisera des styles CSS ordinaires :
#centre {
couleur d'arrière-plan : #F2FDDB ;
bordure : 1px solide #A5CF3D ;
hauteur : 400px ;
marge droite : 202 px ;
marge gauche : 202 px ;
}
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 le. Les côtés gauche et droit ont une largeur adaptative de 202 px. La distance permet simplement d'afficher #left et #right dans cet espace, répondant ainsi aux exigences.