Tutoriel d'introduction à la mise en page Web CSS 6 : colonne de gauche fixe, largeur de colonne de droite adaptative_Tutoriel de base

Dans les applications pratiques, il est parfois nécessaire d'avoir une largeur fixe de la colonne de gauche et de la colonne de droite pour s'adapter automatiquement en fonction de la taille de la fenêtre du navigateur. Il est simple et réalisable d'implémenter une telle méthode de mise en page en CSS. pour définir la largeur de la colonne de gauche, comme dans l'exemple ci-dessus, les colonnes de gauche et de droite utilisent des pourcentages pour implémenter l'adaptation de la largeur, et il suffit de définir la largeur de la colonne de gauche sur une valeur fixe, ne définissez aucune largeur. valeur pour la colonne de droite, et la colonne de droite ne flotte pas. Le code est le suivant :

Copier le code Le code est le suivant. suit :

#left {
couleur de fond : #E8F5FE ;
bordure : 1px solide #A9C9E2 ;
float : gauche
hauteur : 300px ; > largeur : 200px ;
}
#right {
couleur d'arrière-plan : #F2FDDB ;
bordure : 1px solide
hauteur : 300px
}

De cette façon, la colonne de gauche affichera une largeur de 100 % et la colonne de droite s'adaptera en fonction de la taille de la fenêtre du navigateur.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">La colonne de gauche des deux colonnes est fixe et la largeur de la colonne de droite est adaptative - AA25.CN<title> </title> <style type="text/css"> <!-- #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 200px; } #right { background-color: #F2FDDB; border: 1px solid #A5CF3D; height: 300px; } --> </style> Colonne de gauche - fixe (AA25.CN)<div id="left"> </div>Colonne de droite - largeur adaptative (AA25.CN)<div id="right"> </div>