Wie kann man im Webdesign ein Div mit fester Breite und ein Div mit verbleibendem Platz unterbringen?

Unterbringung von Divs mit fester Breite und verbleibenden Divs

Im Webdesign besteht eine häufige Herausforderung darin, zwei Divs unterzubringen, wobei eines eine bestimmte feste Breite hat und das andere dynamisch sein muss Nehmen Sie den verbleibenden Platz ein.

CSS-basierte Lösung

Ein effektiver Ansatz nutzt CSS:

.left {</p>
<pre class="brush:php;toolbar:false">width: 83%;

}

.right {

width: 16%;

}

Diese CSS-Konfiguration gewährleistet dass das .left-Div 83 % der verfügbaren Breite einnimmt, während das .right-Div die restlichen 16 % einnimmt, wodurch die gewünschte feste Breite für das .left-Div erhalten bleibt.

Anzeige: Tabellenmethode

Alternativ bietet die display:table-Eigenschaft eine leistungsstarke Lösung:

<div class="right"> </div><br><div class="left"></div>

.left {</p>
<pre class="brush:php;toolbar:false">display: table-cell;
width: 83%;

}

.right {

display: table-cell;
width: 16%;

}

Durch Festlegen der Wenn Sie die Eigenschaft „to table“ für den übergeordneten Container und „table-cell“ für die Divs anzeigen, erstellt der Browser effektiv eine zweispaltige Tabelle, wobei das Div mit fester Breite in einer Zelle erscheint und der verbleibende Platz die andere Zelle dynamisch füllt.

Fazit

Sowohl CSS- als auch display:table-Methoden bieten effektive Lösungen für das Problem, ein Div mit fester Breite unterzubringen, während das andere Div den verbleibenden Platz einnehmen kann. Der beste Ansatz hängt von den spezifischen Anforderungen und Überlegungen zur Browserkompatibilität ab.

Das obige ist der detaillierte Inhalt vonWie kann man im Webdesign ein Div mit fester Breite und ein Div mit verbleibendem Platz unterbringen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!