Right align multiple elements in the same row under div in css

Method 1:

float:right
In addition, floating will make the layout more compact (no gaps)

<div style="background-color: red;width: 100%;height: 60px;/* text-align: right; */">
	<div style="width: 30px;height: 100%;background-color: yellow;float: right;">hello</div>
	<div style="width: 60px;height: 100%;background-color: blue;float: right;">hi</div>
</div>

The effect diagram is as follows:

Method 2:

display:inline-block+text-align:right
text-align:right affects the inline elements or text below it, so inline-block makes div have the characteristics of inline elements and can be right-aligned

<div style="background-color: red;width: 100%;height: 60px;text-align: right;">
	<div style="width: 30px;height: 100%;background-color: yellow;display: inline-block;">hello</div>
	<div style="width: 60px;height: 100%;background-color: blue;display: inline-block;">hi</div>
</div>

The effect diagram is as follows:

From the above two methods:

The float layout is more compact;
float: right will change the order, but text-align: right will not;
text-align will also affect the text alignment of the elements below it;

Therefore, combining the two methods, we can get the following combination:

<div style="background-color: red;width: 100%;height: 60px;text-align: right;">
	<div style="width: 30px;height: 100%;background-color: yellow;display: inline-block;">hello</div>
	<div style="width: 60px;height: 100%;background-color: blue;float: right;">hi</div>
</div>

The effect is as follows:

Further findings, after synthesis:
The layout is more compact;
When float and inline-block are placed together, there will be no overlap of floats, but they will be arranged in a regular manner.

This is the end of this article about how to right-align multiple elements in a div using CSS. For more information about how to right-align multiple elements in a div using CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!