Wie kann ich zwei Divs horizontal ausrichten, ohne den HTML-Code zu ändern?

Elemente horizontal ausrichten, ohne das Markup zu ändern

Angenommen, Sie haben zwei Divs, #element1 und #element2, die mithilfe von CSS horizontal positioniert sind. Aufgrund von Inhaltsvariationen in #element2 passt es jedoch nicht perfekt zu #element1. Sie benötigen eine Möglichkeit, sie unabhängig von Inhalts- oder Browserunterschieden auszurichten, ohne die HTML-Struktur zu ändern.

Lösung: Verwendung der Inline-Block-Anzeige

Um diese Ausrichtung zu erreichen, müssen Sie kann die Eigenschaft display: inline-block für beide Elemente verwenden:

#element1 {
  display: inline-block;
  margin-right: 10px; /* Set padding between the elements */
}

#element2 {
  display: inline-block;
}

Durch die Einstellung display: inline-block verhalten sich die Elemente ähnlich wie inline Elemente, behalten aber ihre Eigenschaften auf Blockebene bei. Dadurch können Sie sie horizontal positionieren und dabei ihre ursprüngliche Breite und Höhe beibehalten. Die margin-right-Eigenschaft für #element1 führt den gewünschten Abstand zwischen den Elementen ein.

Beispiel

Hier ist ein Beispiel, das die Ausrichtung demonstriert:

<style type="text/css">
  #element1 {
    display: inline-block;
    margin-right: 10px;
  }

  #element2 {
    display: inline-block;
  }
</style>
<div>

Diese Lösung richtet #element2 effektiv neben #element1 aus und sorgt für eine konsistente Auffüllung unabhängig von der Variable von #element2 Breite.

Das obige ist der detaillierte Inhalt vonWie kann ich zwei Divs horizontal ausrichten, ohne den HTML-Code zu ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!