CSS的新表格布局方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS的新表格布局方式</title>
<style type="text/css">
    html,body{width:100%; height:100%;}
    *{margin:0; padding:0;}
    #wrap{display:table; border-collapse:collapse; width:70%; height:100%; margin:0 auto;}
    #nav{display:table-cell; width:20%; pink;}
     #extras{display:table-cell; width:30%; background:#C60;}
    #content{display:table-cell; width:30%; background:#9FF;}
    #comment{display:table-cell; width:20%; background:#FCC; color:#903; font-weight:bold;}
</style>
</head>
<body>
    <div id="wrap">
        <div id="nav">
            <a href="#">首页</a>
            <a href="#">产品中心</a>
            <a href="#">在线留言</a>
            <a href="#">联系我们</a>
            <a href="#">注册用户</a>
        </div>
        <div id="extras">
            "display:table;"的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界、背景等样式,而不会产生因为使用了table那样的制表标签所导致的语义化问题。
        </div>
        <div id="content">
            这种基于表格的新CSS布局方式能够正确的在IE8、Firefox、Safari和Opera(译者注:包括FF2/FF3/Google都通过了测试)中显示出来。
            当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table、table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束,同时也给了HTML表格布局致命一击。最终,使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。
网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。
        </div>
        <div id="comment">
            "display:table;"的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界、背景等样式,而不会产生因为使用了table那样的制表标签所导致的语义化问题<br />
            父节点使用display:table属性,子节点使用display:table-cell属性。实现分栏等高的布局。支持firefox,chrome,safari,opera,IE8。父节点可以不用设置display:table属性,效果同样有!!!
            table-cell是分栏,table-row是分行!!!!
        </div>
    </div>
</body>
</html>



"display:table;"的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界、背景等样式,而不会产生因为使用了table那样的制表标签所导致的语义化问题。


父节点使用display:table属性,子节点使用display:table-cell属性。实现分栏等高的布局。支持firefox,chrome,safari,opera,IE8。父节点可以不用设置display:table属性,效果同样有!!!

           table-cell是分栏,table-row是分行!!!!


特别管用!!!

以上代码产生的效果如下:

你可能感兴趣的:(css,display,table,table-cell,table-row,CSS新表格布局)