为什么 .nav-tabs.nav-justified > li { display: table-cell; width: 1%; }
.nav-tabs.nav-justified > li { display: table-cell; width: 1%; } width:1%;为什么?
.nav-tabs.nav-justified > li { display: table-cell; width: 1%; } width:1%;为什么?
2016-06-21
我也觉得很奇怪为什么是1%,于是今天实验了一下,其实width不必是1%,这个值取决于你cell里内容的长度。举个例子,如果cell里输入‘one’,在chrome中其长度是27个像素,我设置包裹它的div的长度是1000px,那么width的值就可以设置为100/(1000/27)约为2.7%,那么小于2.7%的值都会使cell完整的填充div且cell的长度相等,一般都不会小于1%,所以这个宽度就有它的道理了。由于没有chrome的源码,无从知道table cell宽度的算法,但我通过实验得到了一个可信的算法:我在div中输出了10个‘one’,当width小于10%大于2.7%的时候比较简单,不会填满div,最右边有空白区域,其大小直接用减法即可得到,不多说。当width大于10%的时候最右一个cell宽度坍塌,中间的cell长度也是不等的,其算法为
计算出可以放多少个cell,比如width=15%,可以放6.666666...个‘one’,可是我要放10个
于是要保证有3个one是最小的宽度:27px,最右边的3个one就是了
剩余的宽度:1000-27*3=919px,每个cell的宽度919/6.666....=137.85就是138px,所以有6个138px宽的cell
剩下的一个cell的宽度:1000-6*138-27*3=91px
改变width=17%,上面的算法依然成立。
举报