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>