参考资料:
淘宝UED栅格化模式研究
Bootstrap官网栅格化介绍
CSS3中calc的使用
LESS的使用
栅格化原理介绍
专业词汇说明:
a container
rows 一行
columns 一列
gutters (the space between columns) 两个column中间的间隙
web页面被分成了N行,具体效果图分析如下
可以得出计算公式:(gutter+column) N - gutter = 100%;*
为了消除每一行最后一个coliumn的margin-right的影响:
.row .col:last-child{
margin-right: 0 !important;
}
|> 请看具体demo
还需注意的几个坑:
- calc兼容性极差:IE支持并不是太好
- calc使用的过程中
width: calc( (100% + 20px) / 12 - 20px); 是对的 √
width: calc( (100%+20px)/12-20px);是错的 ×,因为运算符前后应该有空格。
- LESS中计算的时候不支持100%-20px之类的语句