回答編集履歴

1

floatの説明を修正

2017/02/17 13:43

投稿

kura
kura

スコア368

test CHANGED
@@ -22,17 +22,17 @@
22
22
 
23
23
 
24
24
 
25
- - 1段目1つめ:鍋物のレシピ 高さ259px
25
+ - 1段目1つめ:鍋物のレシピ 高さ261px
26
26
 
27
- - 1段目2つめ:20分以内のスピード主菜 高さ259px
27
+ - 1段目2つめ:20分以内のスピード主菜 高さ261px
28
28
 
29
- - 1段目3つめ:10分以内の手軽な副菜 高さ258px ** ←1px小さい **
29
+ - 1段目3つめ:10分以内の手軽な副菜 高さ260px ** ←1px小さい **
30
30
 
31
31
 
32
32
 
33
33
  `.recipe-list>li` の6つの項目は `float: left` で横に並んでいますが、
34
34
 
35
- float は自分の横幅が収まる一番上の位置に行こうとする性質があるので、1段目3つめの高さが若干低いところに4つ目の項目が収まってしまうのです。
35
+ `float: left;`は自分の横幅が上の位置に収まればそこに行こうとする性質があるので、1段目3つめの高さが若干低いところに4つ目の項目が収まってしまうのです。
36
36
 
37
37
  これを防ぐには、`height`で高さを揃える方法があります。あるいは、`clear`を使い、回り込みを防ぐ方法もあります。
38
38