HTML implementiert ein zweispaltiges Layout mit fester Breite links und adaptiver Breite rechts
Implementierung eins: <style> body, html{padding:0; margin:0;} // Verwenden Sie je nach CSS-Positionierung eine schwebende oder absolute Positionierung, um das linke Blockelement vom regulären Dokumentfluss zu trennen und es dem rechten Blockelement gegenüberzustellen div: nth-of -type(1){ float: left; //Verwende die absolute Positionierung // top: 0; // height: 200px; Rot; } // [Element auf Blockebene, füllt standardmäßig automatisch die Breite des übergeordneten Elements aus und belegt eine Zeile] // Derzeit: die Breite des rechten Blockelements = die Breite des übergeordneten Elements div:nth-of-type(2){ // Margin-left auf die Breite des linken Blockelements setzen. margin-left: 300px; // Jetzt: die Breite des rechten Blockelements = die Breite des übergeordneten Elements - margin-left height: 220px; div> <div >div2</div></html>1) Vor dem Festlegen von margin-left
2) Nach dem Festlegen von margin-left
Implementierung zwei: <style> body, html{padding:0; margin:0;} // Verwenden Sie je nach CSS-Positionierung eine schwebende oder absolute Positionierung, um das Blockelement auf der linken Seite vom regulären Dokumentfluss zu trennen div:nth-of-type(1 ){ float: left; //Verwenden Sie die absolute Positionierung // top: 0; // width: 200px; FC ist ein gewöhnlicher (regulärer) Dokumentstrom, ein Formatierungskontext, ein Rendering-Bereich auf der Seite und eine Reihe von Rendering-Spezifikationen. BFC ist ein Formatierungskontext auf Blockebene. // Verwenden Sie den BFC-Formatierungskontext auf Blockebene, um einen isolierten unabhängigen Container zu erstellen. div:nth-of-type(2){ // Ändern Sie den Wert von „overflow“ in „nicht sichtbar“, wodurch ein BFC-Überlauf ausgelöst wird: height: 220px; background: blue ; </style><html> <div>div1</div> <div>div2</div></html>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.