Wie kann man dafür sorgen, dass ein Div nach einem Div mit fester Breite den verbleibenden Platz einnimmt?

So passen Sie zwei Div-Container an, eines mit fester Breite und das andere nimmt den verbleibenden Platz ein

Beim Arbeiten mit zwei Div-Containern, wo einer Da das Modell eine bestimmte Breite benötigt und das andere den verbleibenden Platz dynamisch einnehmen soll, gibt es mehrere Ansätze, um dieses Layout zu erreichen. Lassen Sie uns zwei Methoden erkunden:

Verwendung von Anzeige: Tabelle oder Tabellenzelle

Mit dieser Methode verwenden wir CSS-Anzeigeeigenschaften, um eine tabellenartige Struktur zu erstellen:

<code class="html"><div class="right"></div>
<div class="left"></div></code>

<code class="css">.right {
    float: right;
    width: 250px;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

.left {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}</code>

In diesem Fall hat das „rechte“ Div eine feste Breite von 250 Pixeln, während das „linke“ Div aufgrund seiner „Overflow: Hidden“-Eigenschaft den restlichen Platz einnimmt.

Float und prozentuale Breite verwenden

Ein anderer Ansatz besteht darin, die CSS-Eigenschaft float zu verwenden und die Breite der Divs als Prozentsätze festzulegen:

<code class="html"><div class="right"></div>
<div class="left"></div></code>

<code class="css">.left {
    float: left;
    width: 83%;
    min-height: 50px;
    margin-right: 10px;
}

.right {
    float: right;
    width: 16%;
    min-height: 50px;
    height: 100%;
}</code>

Hier nimmt das „linke“ Div 83 % der verfügbaren Breite ein, sodass 16 % für das „rechte“ Div mit fester Breite übrig bleiben.

Beispieldemo

Überprüfen Sehen Sie sich die folgende Live-Demo auf JSFiddle an, um diese Methoden in Aktion zu sehen: http://jsfiddle.net/SpSjL/

Das obige ist der detaillierte Inhalt vonWie kann man dafür sorgen, dass ein Div nach einem Div mit fester Breite den verbleibenden Platz einnimmt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!