floatで、divを横並びにする方法を模索した話
HTMLっていうのは、基本的に要素を勝手に縦に並べていくものらしい。
▼四角（div）を2つ作ると
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>▼こんなふうに自動的に縦に並ぶ。
これを横並びにする方法はいくつかあるのだけど、そのうちの1つ「float」を使った方法を習った。
floatは文字通り、要素を浮かす力があり、
float: right;→それ自身を画面の右側に浮かべて、後に続く要素を左側に詰めさせる
float: left;→それ自身を画面の左側に浮かべて、後に続く要素を左側に詰めさせる
▼CSS
.box1 {
float: right; /* 画面の右側に浮かべて、後に続く要素を左側に詰めさせる */
width: 100px;
height: 100px;
background-color: #F7DDDB;
}
.box2 {
width: 100px;
height: 100px;
background-color: #B7D8E5;
}▼box1が浮かんで、右側にずれて、その分box2が上に詰められた状態
▼box3を増やして、今度はbox2をfloat: right:してみた。
先生に言われるがままコード書いたらこうなったんだけど、最初はわけがわからないよ！って感じだった。
私なりに調べてかみ砕いて、下手なりに図解してみた。
▼多分、float: right;ってこういうことだと思う。
うーん…ちょっと待って。なんか違うかも。
floatしたやつ、着地しないかも。
よくわかんないから、もう一回図作りなおそ。
コメント