ブロークングリッドレイアウトテスト 画像のみ

未分類
  1. ホーム
  2. 未分類
  3. ブロークングリッドレイアウトテスト 画像のみ

親要素は指定なし、基準画像で高さを指定するパターン

設定内容
1)基準画像  相対配置 幅指定100% (※100%以外を指定すると左に寄ってしまったため)
2)左 絶対配置 子ブロック左寄せ 幅指定2/5、上-1/6 画像左寄せ
3)右 絶対配置 右0 子ブロック右寄せ 幅指定2/5 上2/5

ポイント
・各要素を左右にはみ出してずらすと、スマホ時見切れてしまった。この作り方だと全体で100%以内に収めるよう作る。

・基準画像に左右0:0を指定しても、幅指定を小さくすると左寄せになってしまった。(縮小した分右に余白ができる感じ。)先日教わった事例とどこがちがうのだろうか?

画像と子ブロックそれぞれに配置設定(左寄せ、中央、右寄せなど)があるため都度設定しながら確認が必要だった

・PC時に一番下のコンテンツが次のコンテンツとかぶってしまった。親の最小サイズを設定するべきか?