Wie richtet man DIV-Elemente rechts aus und behält gleichzeitig die vertikale Stapelung bei?

DIV-Elemente rechts ausrichten

Problem:

In einem HTML-Dokument Ausrichtung Mehrere DIV-Elemente auf der rechten Seite können zu Problemen führen, bei denen die Elemente ihre vertikale Stapelung verlieren und letztendlich horizontal angeordnet werden.

Analyse:

Verwendung von „float: right“ für Das Ausrichten von DIVs kann dieses Problem verursachen, insbesondere wenn die DIVs in einem übergeordneten DIV enthalten sind. In solchen Fällen werden die schwebenden DIVs aus dem normalen Fluss des Dokuments entfernt und nebeneinander positioniert.

Lösung:

Um bei Beibehaltung die richtige Ausrichtung zu erreichen Beim vertikalen Stapeln besteht ein alternativer Ansatz darin, die folgenden CSS-Eigenschaften zu verwenden:

margin-left: auto;

• Diese Eigenschaft passt den linken Rand des DIV automatisch an Schieben Sie es nach rechts von seinem übergeordneten Container.

margin-right: 0;

• Diese Eigenschaft eliminiert jeglichen rechten Rand und stellt so den DIV sicher bleibt bündig mit der rechten Kante seines Containers.

Beispiel:

Hier ist eine verbesserte Version des bereitgestellten Codes, der diese Eigenschaften verwendet:

<code class="css">#button {
  position: relative;
  float: right;
}

#addEventForm {
  position: relative;
  margin-left: auto;
  margin-right: 0;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}</code>

Durch die Verwendung dieser Eigenschaften werden die Schaltfläche und das Formular rechts ausgerichtet und wie vorgesehen vertikal nacheinander gestapelt.

Das obige ist der detaillierte Inhalt vonWie richtet man DIV-Elemente rechts aus und behält gleichzeitig die vertikale Stapelung bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!