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都通过了测试）中显示出来。





												


											
CSS display:table属性用法- 轻松实现了三栏等高布局的更多相关文章
	

    
								
  1. [css display],table待续
		
    昨天复习了flex布局,今天打算继续,才发现有display:table,今天有的点,别的先写上,其他的后补吧 css display // none 此元素不会被显示. // block 此元素将显 ...
    
		
    2. 
						
  2. display:table的用法
		
    目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出来的文件k数比用table写出来的要小 ...
    
		
    3. 
						
  3. <display:table>属性解释
		
    参考官方网站:http://www.displaytag.org/1.2/displaytag/tagreference.html 所有属性: cellpadding,cellspacing,clas ...
    
		
    4. 
						
  4. css display table使用小例子实验
		
    display的下面: table: 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. table-row 此元素会作为一个表格行显示(类似 <tr>) ...
    
		
    5. 
						
  5. css display:table圣杯布局
		
    圣杯布局指的是一个网页由页眉,3等高列(2个固定侧栏和中心内容主体)和贴在页面底部的页脚组成. 主要思路是对整个容器使用地上diaplay:table 的css规则,然后分别对页眉页脚使用displa ...
    
		
    6. 
						
  6. 从三栏自适应宽度布局到css布局的讨论
		
    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...
    
		
    7. 
						
  7. 如何用CSS实现中间自适应，两边定宽三栏布局
		
    1.前言 用css实现“两边定宽,中间自适应的三栏布局”这个问题应该是在前端面试中被面试官提问到的高频问题了,一般当面试者写出一种实现方法之后,面试官还会问你还有没有别的方法,尽量多的写出几种实现方法 ...
    
		
    8. 
						
  8. 纯css实现div三列等高布局的最简单方法简化版/也可以多列
		
    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...
    
		
    9. 
						
  9. css display:flex 属性
		
    一:display:flex 布局 display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. ecos编译redboot,vmware运行redboot,执行hello world(图形配置)
			
    1- 下载源文件 :~/ecos$ ls -lrt total 80 drwxr-xr-x 7 XXXX XXXX  4096 Mar 27  2009 ecos-3.0 -rw-r--r-- 1 X ...
    
			
    2. 
						
  2. PIL参考手册
			
    Python Imaging Library Handbook http://effbot.org/imagingbook/pil-index.htm 随机验证码的产生 import Image, I ...
    
			
    3. 
						
  3. MVC4商城项目三：分部视图在导航条上的应用
			
    写了几天发觉大部分时间用在JS上了,本来想写个musicstore,却加了框架,然后又想用后台,然后又想用上bootstrapt,然后又想弄权限设计,然后又想………… 看来是想多了~ 好吧,最近把后台 ...
    
			
    4. 
						
  4. jquery.fn.extend与jquery.extend（转）
			
    jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend( ...
    
			
    5. 
						
  5. TCLP 第一章 1.5字符输入输出
			
    #include <stdio.h> /* 将输入复制到输出:版本1 */ int main() { int c; /* 注意是int而不是char,除了存储char类型字符,还要存储EO ...
    
			
    6. 
						
  6. 线程池 异步I/O线程 <第三篇>
			
    在学习异步之前先来说说异步的好处,例如对于不需要CPU参数的输入输出操作,可以将实际的处理步骤分为以下三步: 启动处理: 实际的处理,此时不需要CPU参数: 任务完成后的处理: 以上步骤如果仅仅使用一 ...
    
			
    7. 
						
  7. Windows 7下可以使用的各个命令语句+C#打开
			
    Windows 7下可以使用的各个命令语句:   control.exe /name microsoft.folderoptions 启动资源管理器的 文件夹属性 选项卡 control.exe /n ...
    
			
    8. 
						
  8. Linux用户与用户组，UID及GID
			
    以下列出文章: Linux系统下如果查看用户的UID和GID:http://blog.csdn.net/ahangliu/article/details/7567444 Linux的用户和用户组管理: ...
    
			
    9. 
						
  9. 动态绑定ReportViewer控件之经验总结
			
    以上两篇文章已经很丰富了,但是照做一遍不行,检查了N遍还是不行,就是找不出问题原因,总是提示“尚未为数据源“DataSet1_DataTable1”提供数据源实例.”这主要是说在为ReportView ...
    
			
    10. 
						
  10. Ajax 缓存问题
			
    Ajax通过GET方式请求服务器数据,Microsoft Internet Explorer浏览器下,由于缓存问题,读取的数据非最新数据,解决问题方法如下: function getData(url, ...
    
			
    11.