【css】画像や要素を均等なサイズで並べる

2019年5月18日css

スポンサーリンク

画像や要素を画面に均等な横幅とかで並べたいときってありますよね。

そんな時は、cssの「calc()」を使って計算式を指定すれば簡単にできるんです。

imgに「width: calc(100% / 4);」を指定すると、横幅を四等分にした数字を画像の横幅にしてくれて、画像を横に4つ同じ横幅で並べることができます。

ちなみに100%だと親要素の横幅に対して4等分になります。

「width: calc(100vw / 4);」といういように「100vw」とすると、ビューポート(ウィンドウの横幅)に対して4等分となります。

[index.css]

img {
  width: calc(100% / 4); /* 横幅を4等分にする */
}

csscss

Posted by ton