Wie erstelle ich ein Layout mit einem Div mit fester Breite und einem Div mit flexibler Breite?

Divs mit variabler Breitenverteilung

In der Webentwicklung ist es oft nützlich, ein Layout zu erstellen, bei dem zwei Divs den verfügbaren Platz teilen, aber eines div hat eine feste Breite.

Frage:

Wie kann man die Breite von divs so anpassen, dass eines eine feste Breite beibehält, während das andere den verbleibenden Platz einnimmt?

Lösung:

Um dies zu erreichen, befolgen Sie diese Schritte:

1. HTML-Struktur:

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

2. CSS:

Für Rechtes Div mit fester Breite:

<code class="css">.right {
    float: right;
    width: 250px;  // Set your desired fixed width
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}</code>

Für Linkes Div mit flexibler Breite:

<code class="css">.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}</code>

3. Zusätzliche Hinweise:

• Sie können für eine bessere browserübergreifende Kompatibilität auch display:table anstelle von float verwenden.
• Passen Sie die width-Eigenschaft von .right entsprechend Ihren spezifischen Anforderungen an .
• Dieser Ansatz stellt sicher, dass das Div mit fester Breite unverändert bleibt, während sich das Div mit flexibler Breite anpasst, um den verbleibenden Platz auszufüllen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Layout mit einem Div mit fester Breite und einem Div mit flexibler Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!