http://www.cnblogs.com/clumiere/p/4506252.html
在使用Bootstrap的过程中,发现很多地方都应用了display:table-cell,决定好好研究一下table-cell的用法。
display:table-cell简述
display:table-cell是指让元素以表格单元格的形式来表现。目前所有主流浏览器都支持display:table-cell。display:table-cell的浏览器兼容性。
使用了display:table-cell的元素设置margin值无效,但padding值是有效的,所以如果要在设置了table-cell的元素上应用margin,需要再包裹一层元素。另外如果设置了display:table-cell的元素的父元素不是display:table-row,父元素的父元素不是display:table,那么浏览器会自动创建相应的匿名元素,使得DOM层次结构符合table/inline-table>table-row>table-cell三层嵌套关系,这就是”匿名创建表格元素规则”。
利用display:table-cell创建等高布局
table表格中每一行单元格都等高,设置了display:table-cell的一组元素也有同样的特点。
利用display:table-cell创建两栏自适应布局
Bootstrap中的输入框组就使用了table-cell来实现两栏自适应。
其中input-add-on的宽度设置为1%,这是一个CSS Hack。我们可以看到input-group-addon的宽度为34px,这个单元格的宽度为整个表格宽度的1%,所以设置了display:table的元素的width为34*100px,因为table元素的最大宽度不能超过其父元素的宽度,同时浏览器会保证所有的设置table-cell的元素的宽度总和等于table元素的宽度,这样就实现了输入框元素的宽度自适应。
利用display:table-cell创建等宽布局
具体代码如下:
HTML:
1 2 3 4 5 6 7 8 9 | < div id="wrapper"> < ul class="lists"> < li class="item">< a href="#">One</ a ></ li > < li class="item">< a href="#">Two</ a ></ li > < li class="item">< a href="#">Three</ a ></ li > < li class="item">< a href="#">Four</ a ></ li > < li class="item">< a href="#">Five</ a ></ li > </ ul > </ div > |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | #wrapper { width : 960px ; margin : 100px auto ; } .lists { display : table; width : 100% ; border-collapse : collapse ; } .lists .item { display : table-cell ; width : 1% ; text-align : center ; border : 1px solid black ; } .lists .item a { display : block ; padding : 25px ; color : white ; background : gray ; } .lists .item a:hover { color : yellow; background : #979797 ; } |