Wie kann ich den Raum proportional zwischen zwei Divs mit fester Breite aufteilen?

Zwei Divs, die den Raum proportional aufteilen

Auf einer Webseite kann es vorkommen, dass Sie zwei Div-Container haben, einen mit fester Breite und den anderen mit fester Breite sollte den verbleibenden verfügbaren Platz belegen. Die effektive Konfiguration dieses Setups kann für ein responsives Layout-Design von entscheidender Bedeutung sein.

Um dies zu erreichen, können Sie verschiedene CSS-Techniken nutzen. Hier sind zwei häufig verwendete Methoden:

Methode 1: Breiteneigenschaften festlegen

Legen Sie eine bestimmte Breite für das Div mit fester Breite fest und verwenden Sie zur Berechnung die Funktion calc() die Breite des anderen Div entsprechend. Stellen Sie sicher, dass die Werte in der Funktion calc() die Breite des Divs mit fester Breite, etwaige Ränder oder Auffüllungen und den gewünschten Anteil des verbleibenden Platzes berücksichtigen.

Methode 2: Verwendung von Display:table und Display:table-cell

Nutzen Sie die Eigenschaften display:table und display:table-cell, um ein tabellenähnliches Layout zu erstellen. Legen Sie die Breiteneigenschaft für das Div mit fester Breite fest und passen Sie die Breite des anderen Div an, indem Sie einen Prozentwert angeben. Der Prozentwert bestimmt den Anteil des verbleibenden Speicherplatzes, den er einnehmen soll.

Beispielcode:

Beziehen Sie sich auf das HTML- und CSS-Codebeispiel unten, in dem das rechte Div (mit der Klasse rechts) hat eine feste Breite von 250 Pixel und das linke Div (mit der Klasse links) nimmt den verbleibenden Platz ein.

HTML:

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

CSS:

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

.right {
  float: right;
  width: 250px;
  min-height: 50px;
  margin-left: 10px;
  border: 2px dashed #00f;
}</code>

Durch die Verwendung dieser Techniken können Sie den Raum effektiv zwischen zwei div-Containern aufteilen und so flexible und reaktionsfähige Weblayouts erstellen.

Das obige ist der detaillierte Inhalt vonWie kann ich den Raum proportional zwischen zwei Divs mit fester Breite aufteilen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!