画像の大きさを問わずきれいに。
極力もともとあるＣＳＳで作る
PC、spで縦に並べる1(19.1.29)
テキスト
テキスト
PC要素を横、spで縦に並べる1(19.1.29)
テキスト
テキスト
PC要素を横、spで縦に並べる2(19.1.29)
テキスト
テキスト
PC、SPで要素を横に並べる
テキスト
テキスト
sp48perBox、sp4perRのクラスを作ればＯＫかも
makuの「2018/07/26/set_up/」で使用してる「.setUpContentsBox2」でもできそう。
PC要素を横、spで縦に並べる
maku:2018/06/21/soccer/
画像の説明文
画像の説明文
↑あとは、ＳＰ時に１つ目の纏まりに下マージンがあればいい
※ＰＣ時、高さを小さいほうに合わせている（比の計算）
※似てるのは「2015/05/26/oudanmakubaseball/」でもやった。
実際blogで何回も使ってたやつ
やり方 その１
PC、SPで要素を横に並べる
(img width 300px)
画像の説明文
画像の説明文
PC要素を横、spで縦に並べる
(img width 300px)
画像の説明文
画像の説明文
↓
↓コードは同じ、imgのサイズを変えてみる。
↓
PC、SPで要素を横に並べる
(img width 250px)
画像の説明文
画像の説明文
PC要素を横、spで縦に並べる
(img width 250px)
画像の説明文
画像の説明文
↓
↓コードは同じ、imgのサイズを変えてみる。
↓
PC、SPで要素を横に並べる
(img width 400px,250px)
画像の説明文
画像の説明文
※PCでは400px＋250px＋15px(margin)で655pxを超えてるから落ちる。
PC要素を横、spで縦に並べる
(img width 400px,250px)
画像の説明文
画像の説明文
ちなみに、ULで作ったらうまくいかなかった。
PC、SPで要素を横に並べる(imgのwidth320以上)
-
画像の説明文
-
画像の説明文
PC、SPで要素を横に並べる(imgのwidth320以下)
-
画像の説明文
-
画像の説明文
メモ
「imgのサイズが２つ同じ」ことが前提のときはulで作る方がいいと思った。