HTML implémente une mise en page sur 2 colonnes, largeur fixe à gauche et adaptative à droite
Première mise en œuvre : <style> body, html{padding:0; margin:0;} // Selon le positionnement CSS, utilisez un positionnement flottant ou absolu pour séparer l'élément de bloc de gauche du flux de document normal et peut être juxtaposé à l'élément de bloc de droite div : nth-of -type(1){ float: left; //Utiliser la position flottante: absolu; //Utiliser le positionnement absolu // top: 0; width: 300px; rouge; } // [Élément de niveau bloc, remplit automatiquement la largeur de l'élément parent par défaut, occupant une ligne] // Actuellement : la largeur de l'élément de bloc droit = la largeur de l'élément parent div:nth-of-type(2){ // Définit margin-left sur la largeur de l'élément de bloc gauche. margin-left: 300px; // Maintenant : la largeur de l'élément de bloc droit = la largeur de l'élément parent - margin-left height : 220px; div> <div >div2</div></html>1) Avant de définir la marge gauche
2) Après avoir défini la marge gauche
Deuxième mise en œuvre : <style> body, html{padding:0; margin:0;} // Selon le positionnement CSS, utilisez un positionnement flottant ou absolu pour séparer l'élément de bloc à gauche du flux de documents normal div:nth-of-type(1 ){ float : left; //Utiliser la position flottante : absolue; //Utiliser le positionnement absolu // top : 0 ; largeur : 300px; FC est un flux de documents ordinaire (régulier), un contexte de formatage, une zone de rendu dans la page et un ensemble de spécifications de rendu. BFC est un contexte de formatage au niveau du bloc. // Utilisez le contexte de formatage au niveau du bloc BFC pour créer un conteneur indépendant isolé div:nth-of-type(2){ // Changez la valeur du débordement sur non visible, déclenchant le débordement BFC : caché hauteur : 220 px fond : bleu ; ; </style><html> <div>div1</div> <div>div2</div></html>Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.