CSS の div の下の同じ行にある複数の要素を右揃えにする

方法1:

フロート:右
さらに、フローティングにするとレイアウトがよりコンパクトになります（隙間がなくなります）

<div style="background-color: red;width: 100%;height: 60px;/* text-align: right; */">
	<div style="width: 30px;height: 100%;background-color: yellow;float: right;">こんにちは</div>
	<div style="width: 60px;height: 100%;background-color: blue;float: right;">こんにちは</div>
</div>

効果図は以下のとおりです。

方法2:

表示:インラインブロック+テキスト配置:右
text-align:rightはインライン要素またはその下のテキストに影響するため、inline-blockはdivにインライン要素の特性を持たせ、右揃えにすることができます。

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

効果図は以下のとおりです。

上記の 2 つの方法から:

フロートレイアウトはよりコンパクトです。
float: right は順序を変更しますが、text-align: right は変更しません。
text-align は、その下の要素のテキスト配置にも影響します。

したがって、2 つの方法を組み合わせると、次の組み合わせが得られます。

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

効果は以下のとおりです。

統合後のさらなる発見:
レイアウトはよりコンパクトになりました。
float と inline-block を一緒に配置した場合、float の重なりは発生せず、規則的に配置されます。

CSS を使用して div 内の複数の要素を右揃えにする方法についての記事はこれで終わりです。CSS を使用して div 内の複数の要素を右揃えにする方法についての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: IE ブラウザの HTML ハックタグの概要

>>: Chrome、Firefox、IEで入力カーソルの位置がずれる問題の解決方法