Wie erstelle ich ein zweispaltiges Layout mit einer rechten Spalte mit fester Breite und einer fließenden linken Spalte?

Zweispaltiges Div-Layout: Erreichen einer rechten Spalte mit fester Breite und einer fließenden linken Spalte

Herausforderung:

Erstellen ein zweispaltiges Layout, bei dem die rechte Spalte eine feste Breite hat, während sich die linke Spalte dynamisch an die verfügbare Breite anpasst Leerzeichen.

Bereitgestellter Code:

Der bereitgestellte Code versucht, das Layout mit Float und Margin zu implementieren, stößt jedoch auf Probleme.

Lösung :

Um eine rechte Spalte mit fester Breite einzurichten und gleichzeitig die Fließfähigkeit in der linken Spalte aufrechtzuerhalten, befolgen Sie diese Schritte Richtlinien:

1. Float in der linken Spalte entfernen:Entfernen Sie die Float-Eigenschaft aus der linken Spalte (#content).
2. HTML-Spalten neu anordnen: Platzieren Sie die rechte Spalte (#right) vor der linken Spalte im HTML-Code. Dadurch wird sichergestellt, dass die Breite der rechten Spalte zuerst angewendet wird.
3. Überlauf auf äußeres Div anwenden: Überlauf hinzufügen: versteckt und eine Höhe (z. B. Höhe: auto) zum äußeren Div (div. Container). Dadurch wird verhindert, dass die inneren Divs den Container überlaufen.
4. Legen Sie die Breite und den Überlauf der linken Spalte fest:Setzen Sie die Breite der linken Spalte auf „Auto“ und fügen Sie „Overflow: Hidden“ hinzu. Dadurch kann die Spalte den verbleibenden Platz ausfüllen und eine Interaktion mit der rechten Spalte verhindert werden.

Beispiel Code:

HTML:

<div class="container">
  <div class="right">
    Right content with fixed width
  </div>
  <div class="left">
    Left content with flexible width
  </div>
</div>

CSS:

.container {
  height: auto;
  overflow: hidden;
}

.right {
  width: 180px;
  float: right;
  background: #aafed6;
}

.left {
  float: none;
  background: #e8f6fe;
  width: auto;
  overflow: hidden;
}

Demo:

Besuchen Sie [dies JsFiddle](https://jsfiddle.net/jackJoe/fxWg7/) für eine funktionierende Demonstration.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein zweispaltiges Layout mit einer rechten Spalte mit fester Breite und einer fließenden linken Spalte?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!