参考资料：
淘宝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之类的语句
网友评论