table-cell width:1% 深入理解
问题描述
今天在使用Bootstrap给页面添加底部导航栏时,需要在手机下也使导航栏呈现水平排列的效果。最后在网上查找解决方法是,看到这样一个解决方法:
.nav-justified > li { display: table-cell; width: 1%; }
而且确实奏效了,但是代码很有意思,我便另外试了试,如果width为百分数,发现随着width值的改变,。这也算前端的一个hack方法,也有许多人已经研究过,推荐一个别人写的网站,可以调试这个方法。http://codepen.io/ld0rman/pen/FCiLh
问题理解
在这里,我在查看了网上的资料后也讲讲我自己的理解。
实际上,有关表的宽度计算是件挺麻烦的事情,这也不是我们的重点,之间先来看看我把table-cell的width设为1%,为什么会出现这样的结果好了。
这里我们利用”display: table-cell”使得每个li元素变成了一个表格中的单元格,注意到我们并没有这个单元格添加外层的表格布局,但是实际上浏览器会默认添加一个隐藏的table,它默认的布局是”table-layout: auto”,所以这个表格的大小是根据单元格的大小确定的。有前端基础的都知道,表格中每个单元格是有自己的最小宽度的,这样我们设置了”width: 1%”实际上是设置table的大小为单元格的最小宽度的100倍。但是很明显,表格是不可能这么宽的,这里可以理解为让表格的宽度尽可能的宽。而且根据单元格必须填满表格一行的特性,就自然呈现出这样的效果。
为了验证,你把width设置为10%时,你会发现表格变小了,也是因为表格大小变成了最小单元格的宽度的10倍,这样也可以解释了
另外如果我把width设置为100%时,会发现第一个单元格非常大然而,其他的也还是存在,但是都被压缩了。我是这样理解的——首先第一个单元格的宽度为100%的话,那么就是表格的大小了,但是这一行还有其他的单元格存在,它是不可能达到100%的,所以第一个尽可能宽,而其他的也能有最小宽度。
问题总结
根据width的值不同,表格会有不同的表现,可以分成两种情况。这里我们需要先计算width =(表格的最大宽度)×width的结果
- 计算出的width小于单元格最小宽度
这种情况下就是以单元格的最小宽度为width,再计算表格应有的大小,再分别各个单元格
- 计算出的width大于单元格最小宽度
这种情况下就从第一个单元格起尽量满足它的宽度,但是要保证后面的单元至少有它的最小宽度
原文出处:https://liaolushen.github.io/2015/09/12/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3-1-table-cell-width/