CSS 寬度計算使用 calc()

CSS 有個蠻常用得功能，就是設定寬度後，往左漂移(float)排列(現在可以使用 flex 等等)

若以前使用 width + float 後，想要將內容置中，就是一件很麻煩的事情，但是 width 有些算法就是無法整除，右邊就會有些空白出現，要怎麼辦呢？

CSS 寬度計算使用 calc()

CSS 現在有 calc() 可以自動計算寬度，無法整除的也會盡量作到填滿。

• 註：CSS 的 calc() 可以使用 +、-、、/ 而且 em、px、% ... 都可以做運算

可以看下述的範例，裡面主要差異只有 .box div 的那段 css，主要是：

• width: 16%;
• width: 16.6%;
• width:calc(100%/6);

範例程式：

<style>
body {width:100%;}
.box {margin:0 auto; width:100%; background:#ccc; height:500px;}
.box div {background:radial-gradient(circle at center,yellow,red); text-align:center;}
.box div {height:350px; float:left; width:calc(100%/6);}
/* .box div {height:350px; float:left; width:16%;} */
/* .box div {height:350px; float:left; width:16.6%;} */
</style>
<div class="box">
  <h1>Test</h1>
  <div>111</div>
  <div>222</div>
  <div>333</div>
  <div>444</div>
  <div>555</div>
  <div>666</div>
</div>

若使用 width: 16% 會看到最右邊還留有一塊灰色，16.6% 會盡量補到滿，而使用 calc() 運算就直接都補到滿，沒有灰色的空間。

• 註：同理若改成 3個，就會需要 33.3%，使用 calc() 會比較省事