2-Spaln Div Layout: Erreichen einer Spalte mit fester Breite und flüssiger linker Kolumne

Challenge:

erstellen Ein zweispaltiges Layout, bei dem die rechte Spalte eine feste Breite hat, während die linke Spalte dynamisch an den verfügbaren Raum passt.

Code bereitgestellt:

Der Code lieferte Versuche zu Versuchen zu Implementieren Sie das Layout mit Float und Rand, begegnet jedoch Probleme.

Lösung:

, um eine Spalte mit fester Breite zu erstellen, während die Flüssigkeit in der linken Spalte beibehalten wird. Befolgen Sie diese. Richtlinien:

1. Platzieren Sie die rechte Spalte (#Right) vor der linken Spalte im HTML -Code. Dies stellt sicher, dass die Breite der richtigen Spalte zuerst angewendet wird.
2. Überlaufen auf äußere Diven anwenden: Überlauf hinzufügen: versteckt und eine Höhe (z. B. Höhe: automatisch) dem äußeren Div (div. Container). Dies verhindert, dass die inneren Divs den Container überfließen.
3. setzen Sie die linke Spaltenbreite und den Überlauf: die Breite der linken Spalte auf automatisch festlegen und Überlauf hinzufügen: versteckt. Dadurch kann die Spalte den verbleibenden Raum füllen und die Interaktion mit der rechten Spalte verhindert. &&&]
   Rechtsinhalt mit fester Breite

   Links Inhalt mit flexibler Breite
4. css:

Demo:

besuchen [diese jsfiddle] (https://jsfiddle.net/jackjoe/fxwg7/) für eine funktionierende Demonstration.