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

Zweispaltiges Div-Layout: Rechte Spalte mit fester Breite, linke Spalte fließend

Frage:

Sie suchen nach einer Lösung zum Erstellen eines zweispaltigen Layouts mit einer rechten Spalte mit fester Breite und einer flexiblen linken Spalte. Trotz der Prüfung verschiedener vorgeschlagener Ansätze hat keiner Ihren spezifischen Anforderungen entsprochen.

Antwort:

Um Ihr gewünschtes Layout zu erreichen, sind die folgenden Änderungen erforderlich:

1. Float aus der linken Spalte entfernen:Entfernen Sie die Float-Eigenschaft aus der linken Spalte. Seine Breite wird automatisch bestimmt.
2. Spaltenreihenfolge in HTML umkehren: Stellen Sie in Ihrem HTML-Code sicher, dass die rechte Spalte vor der linken Spalte steht. Dadurch kann die rechte Spalte mit fester Breite ihre Breite festlegen, bevor die linke Fließspalte angepasst wird.
3. Overflow und Height zum Outer Div hinzufügen: Eine overflow:hidden-Eigenschaft und eine bestimmte Höhe anwenden oder Automatische Höhe zum äußeren Teil. Dadurch wird sichergestellt, dass beide inneren Divs gekapselt werden.
4. CSS für die linke Spalte konfigurieren: Fügen Sie für die linke Spalte width: auto und overflow: hide hinzu. Diese Eigenschaften halten die linke Spalte unabhängig von der rechten Spalte mit fester Breite.

Beispiel für HTML und CSS:

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

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

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

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

Durch Implementierung dieser Eigenschaften Durch Anpassungen können Sie das gewünschte zweispaltige Layout mit einer rechten Spalte mit fester Breite und einer fließenden linken Spalte erstellen.

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!