CSS中的table-cell属性使用实例教程使用CSS的table-cell属性实现左图右文的排版方法详解table-cell完成左侧定宽，右侧定宽及左右定宽等布局的实现方法CSS中使用table-cell法来达到居中效果CSS：Table-cell属性的妙用让div也能享受table定位的好处实现div垂直居中的display:table-cell方法示例介绍display:table-cell实现兼容性的两栏自适应布局实现代码关于CSS中的display:table-cell使用技巧的几种应用

然后，我预测浏览器显示如下：

好吧，我承认我先看了效果，然后就可以下结论了：tom 和 jack 搞基，生出了父亲和爷爷（浏览器会创建一个表格来包裹相邻的display:table-cell元素），表现和第一个表格相同。angel自己生出了父亲和爷爷表现和第二个表格相同。
既然是这样，那么想了解table-cell，就是变相了解表格的td了。那就回到了前面所说的两个特点：同行等高，宽度自动调节。
既然是这样，那么我们就可以拿这个货来作等高布局：

利用列宽度自动调节这个特点可以作左固定右自适应布局：

把这货和vertical-align：middle搞在一起可以进行大小不固定元素的垂直居中布局（还有多行文本垂直居中）：

利用列宽度自动调节这个特点可以作左固定右自适应布局：

有童鞋可能会对这个布局中的width:3000px感到迷惑。那么下面就贴上这个布局的原理：
display:table-cell 元素生成的匿名table默认table-layout:auto。宽度将基于单元格内容自动调整。所以设置width:3000px的用途是尽可能的宽的意思。这样就可以达到自适应的效果。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！