回答編集履歴
1
誤字修正、サンプルリンクの追加
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
質問のCSSでは、imgに`height: 150px;`として高さを固定していますが、これを外すと、添付画像のように高さ
|
|
1
|
+
質問のCSSでは、imgに`height: 150px;`として高さを固定していますが、これを外すと、添付画像のように高さがそろわなくなりますね。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
@@ -68,8 +68,14 @@
|
|
|
68
68
|
|
|
69
69
|
|
|
70
70
|
|
|
71
|
-
ちなみに、これだと、4列からスマホサイズ以下でいき
|
|
71
|
+
ちなみに、これだと、4列からスマホサイズ以下でいきなり4列にしてますが、
|
|
72
72
|
|
|
73
73
|
適当な画面幅で4列→3列→2列→1列と切り替わるようした方がいいと思います。
|
|
74
74
|
|
|
75
75
|
フレックスボックスなら幅を25%→33%→50%→100%とするだけですので簡単です。
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
上記の設計例のサンプル
|
|
80
|
+
|
|
81
|
+
[https://codepen.io/hatena19/pen/yLLLemX](https://codepen.io/hatena19/pen/yLLLemX)
|