Wie richtet man Div-Elemente rechtsbündig aus, während ein drittes Div linksbündig bleibt?

Div-Elemente mithilfe von Margin und Floats ausrichten

Problemstellung:

Ein Benutzer möchte zwei div-Elemente rechtsbündig ausrichten (eine Schaltfläche und ein Formular), während ein drittes Div (eine Leinwand) linksbündig bleibt. Der Versuch, die ersten beiden Elemente auszurichten, führt jedoch dazu, dass sie nebeneinander und nicht nacheinander angezeigt werden.

Lösung mit Rändern und Floats:

Die Der bereitgestellte Code verwendet Floating, um die Schaltfläche und das Formular auszurichten. Während Floating im Allgemeinen funktionieren kann, gibt es bekanntermaßen Probleme mit IE 6 und 7.

Um dieses Problem zu beheben, sollten Sie für das innere Div, das die Schaltfläche und das Formular enthält, die Verwendung von Rändern anstelle von Floating in Betracht ziehen. Hier ist das überarbeitete CSS:

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

Erklärung:

• margin-left: auto: Dadurch wird das innere Div an der ausgerichtet rechter Rand des enthaltenden Div.
• margin-right: 0: Dadurch wird sichergestellt, dass das Div keinen Platz auf der rechten Seite einnimmt, sodass die Schaltfläche den verbleibenden Platz einnehmen kann.

Die Verwendung von Rändern sorgt für ein konsistenteres Verhalten in verschiedenen Browsern, einschließlich IE, und stellt sicher, dass die Elemente wie beabsichtigt ausgerichtet sind.

Das obige ist der detaillierte Inhalt vonWie richtet man Div-Elemente rechtsbündig aus, während ein drittes Div linksbündig bleibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!