display:table-cell的几种应用
http://www.cnblogs.com/clumiere/p/4506252.html
display:table-cell的几种应用
在使用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;
}
|
wiwili