Wie erstelle ich mithilfe von CSS ein zweispaltiges Layout mit einer rechten Spalte fester Breite?

Erstellen eines zweispaltigen Layouts mit einer rechten Spalte fester Breite

Beim Entwerfen eines Website-Layouts sind häufig zwei Spalten erforderlich , eine mit fester Breite und die andere mit fließender Breite. Dies kann durch eine Kombination aus CSS-Eigenschaften und HTML-Struktur erreicht werden.

Zu Beginn ist es wichtig, die Float-Eigenschaft aus der linken Spalte zu entfernen. Im Gegensatz zur rechten Spalte, die zur Fixierung ihrer Position einen Float und eine definierte Breite benötigt, sollte die linke Spalte in der Breite flexibel bleiben.

Außerdem sollte die rechte Spalte im HTML-Code flexibel bleiben vor der linken Spalte platziert werden.

Durch Anwenden einer overflow:hidden-Eigenschaft und eines Höhenwerts (entweder automatisch oder eine bestimmte Messung) auf das Container-Div umschließt der umgebende Raum beide inneren divs.

Um schließlich die Unabhängigkeit der linken Spalte von der rechten Spalte mit fester Breite sicherzustellen, ist es notwendig, eine Eigenschaft „width: auto“ und eine Eigenschaft „overflow: versteckt“ hinzuzufügen. Durch diese Kombination kann die linke Spalte erweitert werden, ohne die rechte Spalte zu beeinträchtigen.

Um dieses Layout zu veranschaulichen, berücksichtigen Sie den folgenden HTML- und CSS-Code:

HTML:

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

CSS:

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

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

.left {
  float: none; /* not needed, just for clarification */
  background: #e8f6fe;
  /* the next props are meant to keep this block independent from the
  other floated one */
  width: auto;
  overflow: hidden;
}

Dieses Layout effektiv Positioniert die rechte Spalte mit einer festen Breite auf der rechten Seite, während die linke Spalte flexibel bleibt und sich dem verfügbaren Platz anpasst.

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