Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > CSS-Tutorial > Wie kann man im Webdesign ein Div mit fester Breite und ein Div mit verbleibendem Platz unterbringen?

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

DDD

Freigeben： 2024-10-27 11:25:02

Original

309 Leute haben es durchsucht

How to Accommodate a Fixed-Width Div and a Remaining Space Div in Web Design?

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">width: 83%;

Nach dem Login kopieren

}

.right {

width: 16%;

Nach dem Login kopieren

}

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: table-cell;
width: 83%;

Nach dem Login kopieren

}

.right {

display: table-cell;
width: 16%;

Nach dem Login kopieren

}

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!

Quelle：php.cn

Vorheriger Artikel：Wie wirkt sich die Bootstrap-Klasse „mb-0“ auf den Rand eines Elements aus? Nächster Artikel：Hier sind einige Titeloptionen, die mit dem Frageformat spielen: * Kann ich HTML- und CSS-Dateien ohne WAR-Datei auf Tomcat bereitstellen? (Direkt und explizit) * So stellen Sie HTML- und CSS-Webseiten in Tomcat bereit:

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors