Einführungs-Tutorial 6 zum CSS-Webseitenlayout: feste linke Spalte, adaptive rechte Spaltenbreite_Grundlegendes Tutorial

In praktischen Anwendungen ist es manchmal erforderlich, eine feste Breite der linken Spalte und der rechten Spalte zu haben, um diese automatisch an die Größe des Browserfensters anzupassen. Es ist einfach und machbar, eine solche Layoutmethode in CSS zu implementieren Um die Breite der linken Spalte festzulegen, wie im obigen Beispiel, verwenden sowohl die linke als auch die rechte Spalte Prozentsätze, um die Breitenanpassung zu implementieren, und wir müssen nur die Breite der linken Spalte auf einen festen Wert festlegen, keine Breite festlegen Wert für die rechte Spalte, und die rechte Spalte ist nicht schwebend. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt folgt:

#left {
Hintergrundfarbe: #E8F5FE;
Grenze: links;
Höhe: 300px; > width: 200px; 🎜>
Auf diese Weise zeigt die linke Spalte 100 % Breite an und die rechte Spalte passt sich entsprechend der Browserfenstergröße an.







Die linke Spalte der beiden Spalten ist fest und die Breite der rechten Spalte ist adaptiv – AA25.CN

Linke Spalte – behoben (AA25.CN) Rechte Spalte – adaptive Breite (AA25.CN) <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <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> <div id="left">[Strg+A Alle ausw盲hlen Hinweis: </div>Wenn Sie externe Js einf眉hren m眉ssen, m眉ssen Sie zum Ausf眉hren eine Aktualisierung durchf眉hren <div id="right">]</div> Die Breite der rechten Spalte der zweiten Spalte wird h盲ufig auf Websites verwendet, unabh盲ngig davon, ob es sich um die rechte Spalte oder die linke Spalte handelt. Sie m眉ssen nur die Schreibweise der beiden Divs 盲ndern In vielen aktuellen Blogs gibt es beispielsweise die von vielen Internetnutzern in pjblog erstellten Vorlagen mit diesem Layout. Der Produktionsprozess wird hier nicht im Detail beschrieben. Bitte beziehen Sie sich auf das vorherige Tutorial: Einf眉hrung in das CSS-Webseitenlayout, Tutorial 5: Anpassung der Breite zweier Spalten.