More than 3 years have passed since last update.

きっちり等間隔に3等分する方法

Last updated at 2020-12-30Posted at 2020-12-29

CSSで計算式を可能にするcalcの紹介です。

めちゃくちゃ便利。

何がしたいか

フッターの要素を3等分したい。（アプリによくあるフッター要素みたいなのを作りたかった）

<div class="footer-container">
  <div class="container">要素A</div>
  <div class="container">要素B</div>
  <div class="container">要素C</div>
</div>

この要素A〜Cをそれぞれきれいに３等分にしたい。

.footer-container > .container {
  width: calc(100% / 3);
}

これだけ。

でも、これだとブラウザ（主にIE）のバージョンによっては対応していないこともあるので、必要な場合は下記。

.footer-container > .container {
  width: calc(100% / 3);
  width: 33.333% ;
}