En utilisant le positionnement flottant, la largeur fixe et l'adaptabilité d'une colonne à plusieurs colonnes peuvent être terminées simplement simplement, y compris la largeur fixe de trois colonnes. Ici, nous avons présenté une nouvelle exigence, dans l'espoir d'avoir une disposition à trois colonnes, où 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 au milieu La colonne doit être dans la colonne de gauche et la colonne de droite. Cela met en avant une nouvelle exigence pour la mise en page, et simplement l'utilisation de l'attribut Float et l'attribut en pourcentage ne peut pas être réalisé. Utilisé pour la colonne du milieu pour la largeur, il utilisera la largeur de la fenêtre du navigateur, plutôt que pour l'espacement moyen entre les colonnes gauche et droite, nous devons donc repenser ce problème. #mise en page { Si #Layout utilise la position: Absolute; La marge gauche est de 0px. . De cette façon, la colonne gauche sera affichée sur le côté gauche du bord gauche, tandis que la colonne de droite sera affichée sur le côté droit à droite: 0px; Pour #Center, nous n'avons plus besoin de définir sa méthode flottante. La distance des côtés gauche et droite permet simplement de s'afficher #Left et #Right dans cet espace, réalisant ainsi les exigences.
Positionnement absolu
Avant de commencer une telle disposition à trois colonnes, il est nécessaire de comprendre une nouvelle méthode de positionnement - positionnement absolu. La méthode de positionnement flottante est principalement ajustée automatiquement par le navigateur en fonction du contenu de l'objet. Le positionnement et le positionnement absolu sont obtenus en utilisant l'attribut de position.
Position utilisée pour définir les valeurs disponibles pour positionner l'objet: statique / absolu / relatif
Pour chaque objet de la page, la propriété de position par défaut est statique. Si vous définissez l'objet en position: Absolu, l'objet sera séparé du flux de documents et repositionné en fonction de l'emplacement de la page entière. Lorsque vous utilisez cette propriété, vous pouvez utiliser le haut, à droite, en bas, à gauche, c'est-à-dire la valeur de distance des quatre directions de la partie supérieure, de la droite, de la baisse et de la gauche pour déterminer la position spécifique de l'objet.
Position: absolue;
En haut: 20px;
gauche: 0px;
}
Remarque: Si un objet est défini sur la position: Absolute; Positionnement absolu, l'objet flotte sur la page Web comme un calque.
Après le positionnement absolument, l'objet ne sera plus pris en compte avec la relation flottante dans la page.
Dans ce cas, l'utilisation de positionnement absolu peut résoudre le problème que nous avons bien soulevé. De même, nous utilisons 3 divs pour former nos trois structures de colonnes:
#gauche {
Color d'arrière-plan: # E8F5FE;
Border: 1px solide # A9C9E2;
hauteur: 400px;
Largeur: 200px;
Position: absolue;
En haut: 0px;
gauche: 0px;
}
#droite {
Color d'arrière-plan: # ffe7f4;
Border: 1px solide # f9b3d5;
hauteur: 400px;
Largeur: 200px;
Position: absolue;
En haut: 0px;
Droite: 0px;
}
#centre {
Color d'arrière-plan: # f2FDDB;
Border: 1px solide # A5CF3D;
hauteur: 400px;
marge-droite: 202px;
marge-gauche: 202px;
}