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