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() 會比較省事

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料