cssのfloatプロパティについてのメモ
新しいブログをはじめました!
ブログ名:筋肉カメレオン
WordpressやAWS、時々筋トレについて書いてます。
ハマったので今後のためにメモしておく。
やりたいこと
2つのブロック要素を右に寄せて横並びにさせたい。
イメージ
<p>A要素</p><p>B要素</p>
はじめにやったこと
<div> <p class="type_A">A要素</p> <p class="type_B">B要素</p> </div>
p.type_A{ float: right; } p.type_B{ float: right; }
floatプロパティでA要素を右へ、B要素をさらに右へ並ばせられるかと思ったんだけど、ダメだった。
↓表示結果
<p>B要素</p><p>A要素</p>
どうやら、floatプロパティは、「float:left」と指定すると要素は左から詰めていき、「float:right」と指定すると要素は右から詰めていくらしい。
そのため、上記のような表示になってしまった。
単純にXHTMLの順番を入れ替えれば、理想の表示ができるけど、ちょっと気持ちが悪い。