在開發不規則佈景時需要用到隨物件調整CSS的top位置的功能，原本都是用JQuery計算在輸出的，後來發現原來css也能做數值運算，用calc() 這樣就能在smarty迴圈中定義的css並給予計算，然後自動調整物件的top位置，基本上來說只要式css的物件樣式都能計算
例如：
top: calc(60px + <{$a}>px);
<{$a}>為迴圈數預設為1，這樣每回圈一次top的數值+1輸出即為61,62,63......
也還能作其他的計算
width: calc(50% + 8px)
/* 意思是 50% 的寬度 + 上 8px */
width: calc(50% + -8px)
/* 意思是 50% 的寬度 + 上 -8px，也等於 '50% - 8px' */
+：加
-：減
*：乘。其中一個運算參數必須是數字 (number)
/：除。除數必須是數字，除數不可為零，會造成 HTML 解析錯誤。
有需要的朋友參考看看!
參考教學：https://5xruby.tw/posts/css-calc/
工作心得撰寫：徐嘉裕 Neil hsu
例如：
top: calc(60px + <{$a}>px);
<{$a}>為迴圈數預設為1，這樣每回圈一次top的數值+1輸出即為61,62,63......
也還能作其他的計算
width: calc(50% + 8px)
/* 意思是 50% 的寬度 + 上 8px */
width: calc(50% + -8px)
/* 意思是 50% 的寬度 + 上 -8px，也等於 '50% - 8px' */
+：加
-：減
*：乘。其中一個運算參數必須是數字 (number)
/：除。除數必須是數字，除數不可為零，會造成 HTML 解析錯誤。
有需要的朋友參考看看!
參考教學：https://5xruby.tw/posts/css-calc/
工作心得撰寫：徐嘉裕 Neil hsu
留言
張貼留言