Heim > Web-Frontend > CSS-Tutorial > Wie richtet man Div-Elemente rechtsbündig aus, während ein drittes Div linksbündig bleibt?

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

DDD
Freigeben: 2024-11-05 20:07:02
Original
449 Leute haben es durchsucht

How to Right-Align Div Elements While Keeping a Third Div Left-Aligned?

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;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage