关于CSS中的display:table-cell使用技巧的几种应用

2024-07-11 08:29:24

字体：大中小

来源：转载

供稿：网友

一、display:table-cell属性简述

display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用。

我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的，虽说IE6/7不支持此属性，但是幸运的是，IE6/7一些乱糟糟的属性与渲染，我们可以其他方法实现同样或是类似的效果。

与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

二、display:table-cell与大小不固定元素的垂直居中

使用display:table-cell让大小不固定元素垂直居中已经是很老的方法了，关于此应用，我已经在“大小不固定的图片、多行文字的水平垂直居中”这篇文章中有过介绍。
以前图片垂直居中之截图张鑫旭-鑫空间-鑫生活

方便阅读，这里再次展示下代码：

复制代码

代码如下:/*这里的大小是根据高宽上限128像素图片设置的*/ div{display:table-cell; width:1em; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;} div img{vertical-align:middle;}[code]结果如下图：
<img title="table-cell和文字大小实现的图片垂直居中显示" height="158" alt="table-cell和文字大小实现的图片垂直居中显示" width="632" src="https://files.Vevb.com/file_images/article/201212/2012120716364114.jpg" />这里有个demo地址，里面有display:table-cell实现大小不固定图片垂直居中的效果展示，您可以狠狠地点击<a class="a_link" target="_blank" _blank="" href="https://www.Vevb.com/css/67404.html">这里</a>。二、display:table-cell与两栏自适应布局就在前不久，看facebook好友动态列表页面前端代码的时候才发现原来display:table-cell可以用在两栏的自适应布局上。
<img class="alignnone" title="facebook的table-cell自适应方法张鑫旭-鑫空间-鑫生活" height="316" alt="facebook的table-cell自适应方法张鑫旭-鑫空间-鑫生活" width="591" src="https://files.Vevb.com/file_images/article/201212/2012120716364115.png" />虽然IE6/7不认识display:table-cell，但是亏了其一向自以为是的渲染与解析，我们可以很幸运的使用其他属性实现几乎一致的效果。
<img class="alignnone" title="display:table-cell下的两栏自适应效果截图张鑫旭-鑫空间-鑫生活" height="256" alt="display:table-cell下的两栏自适应效果截图张鑫旭-鑫空间-鑫生活" width="487" src="https://files.Vevb.com/file_images/article/201212/2012120716364116.png" />您可以狠狠地点击这里：<a class="a_link" target="_blank" href="https://www.Vevb.com/css/67405.html">display:table-cell下两栏自适应布局demo</a>代码展示：
本例中，左侧为头像，右侧内容自适应。其中头像部分使用了float属性，左浮动，IE8+以及Firefox、Chrome、Opera等现代浏览器右侧使用了display:table-cell属性，结果就自适应了，很简单的代码，很神奇的效果。
<img class="alignnone" title="display:table-cell自适应布局代码展示张鑫旭-鑫空间-鑫生活" height="362" alt="display:table-cell自适应布局代码展示张鑫旭-鑫空间-鑫生活" width="585" src="https://files.Vevb.com/file_images/article/201212/2012120716364117.png" />OK，对于不认识display:table-cell属性的IE6/7呢？哦呵呵，很简单，使用display:inline-block属性代替display:table-cell就完全ok的啦！原因在于：IE6/7下block属性的元素对inline-block属性是有反应，但是却不是纯洁的反应，而是怪蜀黍看到粉嫩小萝莉的一点邪念，就是让元素有个怪异的haslayout属性。//zxx:大家似乎都喜欢用haslayout解析一些老IE下的一些怪异现象，但我自己打心底里是不认同这个概念。如果IE6/7是很标准的纯洁的解释inline-block属性的话，是无法实现自适应的，右侧的文字描述内容会跑到头像的下面，哦呵呵~~有点负负得正，以毒攻毒的意味。代码如下：[code]display:table-cell; *display:inline-block;

上一篇：CSS让高度不确定图片垂直居中的几种技巧

下一篇：表单元素radio select对齐与IE6下双边距问题解决方案