Mehrere Elemente in derselben Zeile unter Div in CSS rechtsbündig ausrichten

Methode 1:

schweben: rechts
Darüber hinaus wird das Layout durch das Schweben kompakter (keine Lücken)

<div style="Hintergrundfarbe: rot;Breite: 100%;Höhe: 60px;/* Textausrichtung: rechts; */">
	<div style="width: 30px;height: 100%;background-color: yellow;float: right;">hallo</div>
	<div style="width: 60px;height: 100%;background-color: blue;float: right;">hallo</div>
</div>

Das Wirkungsdiagramm sieht wie folgt aus:

Methode 2:

Anzeige: Inline-Block + Textausrichtung: rechts
text-align:right wirkt sich auf die Inline-Elemente oder den Text darunter aus, sodass inline-block dafür sorgt, dass div die Eigenschaften von Inline-Elementen hat und rechtsbündig ausgerichtet werden kann.

<div style="Hintergrundfarbe: rot;Breite: 100%;Höhe: 60px;Textausrichtung: rechts;">
	<div style="width: 30px;height: 100%;background-color: yellow;display: inline-block;">hallo</div>
	<div style="width: 60px;height: 100%;background-color: blue;display: inline-block;">hallo</div>
</div>

Das Wirkungsdiagramm sieht wie folgt aus:

Von den beiden oben genannten Methoden:

Das Float-Layout ist kompakter;
float: right ändert die Reihenfolge, text-align: right jedoch nicht;
Textausrichtung wirkt sich auch auf die Textausrichtung der darunterliegenden Elemente aus.

Wenn wir die beiden Methoden kombinieren, können wir daher die folgende Kombination erhalten:

<div style="Hintergrundfarbe: rot;Breite: 100%;Höhe: 60px;Textausrichtung: rechts;">
	<div style="width: 30px;height: 100%;background-color: yellow;display: inline-block;">hallo</div>
	<div style="width: 60px;height: 100%;background-color: blue;float: right;">hallo</div>
</div>

Die Wirkung ist wie folgt:

Weitere Erkenntnisse nach Synthese:
Das Layout ist kompakter;
Wenn Float und Inline-Block zusammen platziert werden, gibt es keine Überlappung der Floats, sondern sie werden in regelmäßiger Weise angeordnet.

Dies ist das Ende dieses Artikels zum Thema „Rechtsbündig ausrichten mehrerer Elemente in einem Div mithilfe von CSS“. Weitere Informationen zum Thema „Rechtsbündig ausrichten mehrerer Elemente in einem Div mithilfe von CSS“ finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!