teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

floatの説明を修正

2017/02/17 13:43

投稿

kura
kura

スコア368

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