CSS display:table属性用法- 轻松实现了三栏等高布局

时间：2023-12-24 12:16:49
       display:table:此元素会作为块级表格来显示（类似 <table>）;    
display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性
的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用，但是现在是移动端的天下了，ie 说拜拜吧~

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

1. 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;}


2. 轻松实现了三栏等高布局

    CSS display属性值，包括与表格相关的属性值：CSS display:table、 CSS display:table-row和CSS display:table-cell，
不多说，直接上代码了：
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>display:table</title>

<style>

*{ padding:0; margin:0;}

.main{ display:table; border-collapse:collapse; /*为表格设置合并边框模型*/}

.nav{ display:table-cell; width:180px; background:#999;}

.extras{ display:table-cell; width:180px; padding-left:10px; border-right:1px solid #F00; background:#060;}

.content{ display:table-cell; width:300px; padding-left:10px;}

</style>

</head>

<body>

<div class="wrapper">

    <div class="header"></div>

  <div class="main">

      <div class="nav">静安嘉</div>

      <div class="extras">空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的</div>

      <div class="content">阿瓦我ii啊啊啊<br><br><br><br><br><br><br>空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的空间第六节安静的</div>

    </div>

</div>

</body>

</html>



　　这种基于表格的新CSS布局方式能够正确的在IE8、Firefox、Safari和Opera（注：包括FF2/FF3/Google都通过了测试）中显示出来。





相关文章