🌹 喇賽的人 Blog 🌹

🌹 喇低喇賽 🌹

0%

CTE妙用 產生出css網格系統

亂寫於 更新於 Disqus：
廢話字數： 1.6k 所需傷眼時間 ≈ 1 分鐘

 

看書時某個章節講述手寫類似 bootstrap 的 css 網格系統
主要原理是 100% / 12 * N
12 可以是你需要的 column 數量
特別要注意重點
1.就是要加上百分比 % 符號
2.calc 計算中間要有空白否則會失效
因為太懶了腦洞大開可以直接用 sql 的 cte 進行程式碼產出
使用 cte 搭配 union all 產生 1-12 的數字

1
2
3
4
5
6
7
8
9
10
11
WITH col (C) as(
	select C = 1
	union all
	select C + 1
	from col
	where C < 12
)
select 
	'.column-' + CAST( C as nvarchar) + ' { width: calc( 100% / 12 * ' + CAST( C as nvarchar) + '); }' as 'css-calc-column' ,
	'.column-' + CAST( C as nvarchar) + ' { width: ' + CAST ( C / 12.0 * 100 as nvarchar) + '%;}' as 'css-column'
from col

最終結果如下
寫法1動態計算

1
2
3
4
5
6
7
8
9
10
11
12
.column-1 { width: calc( 100% / 12 * 1); }
.column-2 { width: calc( 100% / 12 * 2); }
.column-3 { width: calc( 100% / 12 * 3); }
.column-4 { width: calc( 100% / 12 * 4); }
.column-5 { width: calc( 100% / 12 * 5); }
.column-6 { width: calc( 100% / 12 * 6); }
.column-7 { width: calc( 100% / 12 * 7); }
.column-8 { width: calc( 100% / 12 * 8); }
.column-9 { width: calc( 100% / 12 * 9); }
.column-10 { width: calc( 100% / 12 * 10); }
.column-11 { width: calc( 100% / 12 * 11); }
.column-12 { width: calc( 100% / 12 * 12); }

寫法2靜態計算

1
2
3
4
5
6
7
8
9
10
11
12
.column-1 { width: 8.333300%;}
.column-2 { width: 16.666600%;}
.column-3 { width: 25.000000%;}
.column-4 { width: 33.333300%;}
.column-5 { width: 41.666600%;}
.column-6 { width: 50.000000%;}
.column-7 { width: 58.333300%;}
.column-8 { width: 66.666600%;}
.column-9 { width: 75.000000%;}
.column-10 { width: 83.333300%;}
.column-11 { width: 91.666600%;}
.column-12 { width: 100.000000%;}
關閉