- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
也就是可以像表格那样，自由地把一行拆分成多列，甚至列内也做拆分，并且每列所占的大小/比例可以精确控制
大家都有哪些实践经验可以分享？我试过使用float为left来控制，总感觉不灵活，而且容易算不准。
伊谢尔伦2017-04-17 11:07:48
可以全浏览器兼容，但是需要用到一些hack解决float定位的问题，同时需要考虑清除浮动。
在很多比例（1/3、2/3是最常见的情形）不能整除的情况下，在一些情形下出现1px的误差。
缺点同上。hack量和方案A不相上下。
额外的好处是有很多vertical-align方式可以指定，额外的坏处是很多vertical-align的属性值对于各个浏览器来说都不一样。最常见的vertical-align还是middle和baseline，顶多再加个top和bottom。
用表格当然是全浏览器支持的选择。
用display:table和display:table-cell等属性替代表格，以兼顾语义。IE8+和现代浏览器支持。
下面介绍bootstrap的一套可复用的方案，这套方案是从方案A发展而来，主题思想是抽取出布局中可以复用的类。
一个常见的列拆分如下：
<p class="container">
<p class="row">
<p class="col-md-3"></p>
...
</p>
</p>
bootstrap的栅格系统的核心，即是使用这样的一个三层结构，最内层使用width来分配100%的父级宽度。
对于单列的类名规则是：col-[lg/md/sm/xs]-[1~12]。详情见bootstrap栅格选项。
中间的变量跟响应式media查询有关，这里不详细解释。最后一个值x，既等分父容器的1/12乘以x。如下：
.col-md-3 { float:left; }
@media (min-width: 992px) {
.col-md-3 { width: 25%; }
/* 父级容器的3/12 */
}
在bootstrap栅格系统中，每个col之间都有30px间隙，如何做到等分间隙呢？见如下CSS属性：
/* 列容器设置左右padding */
.col-md-3 {
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
/* 行容器设置负margin撑开 */
.row {
margin-right: -15px;
margin-left: -15px;
}
/* 行容器清理浮动 */
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
/* container再补完被row挖去的15px */
.container {
padding-right: 15px;
padding-left: 15px;
}
等等，是不是有哪里不对？计算一下宽度：
每一个col-md-3的最终宽度 = 父容器宽度 * 25% + 15px * 2 (padding宽度) + 0 (border宽度)
怎么会每个都1/4等分父容器呢？
还有这个属性在作用：
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
bootstrap使用*来选取所有元素（这是我对bootstrap感到厌烦的原因，为了开发效率，牺牲选择器效率），并强制使用border-box计算宽度，因而达到了布局上的大和谐这样的计算公式：
父容器宽度 * 25% = 每一个col-md-3的最终宽度 + 15px * 2 (padding宽度) + 0 (border宽度)
这样做以后，可以很方便地拿出对应的类来使用，也可以级联，类似于row-col-row-col-row-col……
p.container
h1 test
p.row
p.col-sm-6
p.row
p.col-sm-6
img(src="holder.js/100%x180")
p.col-sm-6
img(src="holder.js/100%x180")
p.col-sm-6
p.row
p.col-sm-3
img(src="holder.js/100%x180")
p.col-sm-9
img(src="holder.js/100%x180")
（上面用了jade的语法展示层级，和bootstrap的holder.js来补充一个img元素以展示效果）。效果如下：
bootstrap方案的适用面是IE8+及其他现代浏览器，在这个方案中，主要的问题在于box-sizing属性的兼容性，小瑕疵是百分比宽度带来的±1px误差的问题。
