回答編集履歴
1
floatの説明を修正
answer
CHANGED
|
@@ -10,12 +10,12 @@
|
|
|
10
10
|
|
|
11
11
|
「行事のイベントレシピ」と「料理の基本」が下にずれているのは、その上段の「10分以内の手軽な副菜」の高さだけ他の2つより低いためです。
|
|
12
12
|
|
|
13
|
-
- 1段目1つめ：鍋物のレシピ 高さ
|
|
13
|
+
- 1段目1つめ：「鍋物のレシピ」 高さ261px
|
|
14
|
-
- 1段目2つめ：20分以内のスピード主菜 高さ
|
|
14
|
+
- 1段目2つめ：「20分以内のスピード主菜」 高さ261px
|
|
15
|
-
- 1段目3つめ：10分以内の手軽な副菜 高さ
|
|
15
|
+
- 1段目3つめ：「10分以内の手軽な副菜」 高さ260px ** ←1px小さい **
|
|
16
16
|
|
|
17
17
|
`.recipe-list>li` の6つの項目は `float: left` で横に並んでいますが、
|
|
18
|
-
float は自分の横幅が
|
|
18
|
+
`float: left;`は自分の横幅が右上の位置に収まればそこに行こうとする性質があるので、1段目3つめの高さが若干低いところに4つ目の項目が収まってしまうのです。
|
|
19
19
|
これを防ぐには、`height`で高さを揃える方法があります。あるいは、`clear`を使い、回り込みを防ぐ方法もあります。
|
|
20
20
|
|
|
21
21
|
```css
|