display : table table-row rable-cell

文章参考 http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/

 

当IE8发布时，它将支持很多新的CSS display属性值，包括与表格相关的属性值：CSS display:table、 CSS display:table-row和CSS display:table-cell，它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束，同时也给了HTML表格布局致命一击。最终，使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。

 

 

“CSS display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样

 

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

 

.div_table{ display: table;}
.div_table_row{display: table-row;}
.div_table_cell{display: table-cell;}


<div class="div_table all_width">
	<div class="div_table_row ">
		<div class="div_table_cell text-center">
		   用户姓名：
			<input type="text" class="width_70px">
		</div>
		<div class="div_table_cell text-center text-center">
			联系电话：
			<input type="text" class="width_70px">
		</div>
	</div>
	<div class="div_table_row ">
		<div class="div_table_cell text-center">
			服务中心：
			<input type="text" class="width_70px">
		</div>
		<div class="div_table_cell text-center">
			详细地址：
			<input type="text" class="width_70px">
		</div>
	</div>

	<div class="div_table_row ">
		<div class="div_table_cell text-center">
			清洗时间：
			<input type="text" class="width_70px">
		</div>
		<div class="div_table_cell text-center">
			清洗项目：
			<input type="text" class="width_70px">
		</div>
	</div>
</div>