div构建table

1、Css display值与解释-（详细可见CSS手册的CSS display手册）参数： block :块对象的默认值。用该值为对象之后添加新行 none :隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 inline :内联对象的默认值。用该值将从对象中删除行 compact :分配对象为块对象或基于内容之上的内联对象 marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用 inline-table :将表格显示为无前后换行的内联对象或内联容器 list-item :将块对象指定为列表项目。并可以添加可选项目标志 run-in :分配对象为块对象或基于内容之上的内联对象 table :将对象作为块元素级的表格显示 table-caption :将对象作为表格标题显示 table-cell :将对象作为表格单元格显示 table-column :将对象作为表格列显示 table-column-group :将对象作为表格列组显示 table-header-group :将对象作为表格标题组显示 table-footer-group :将对象作为表格脚注组显示 table-row :将对象作为表格行显示 table-row-group :将对象作为表格行组显示

2、代码段如下

#main { display : table ; border-collapse : collapse ; } #nav { display : table-cell ; width : 180px ; background-color : #e7dbcd ; } #extras { display : table-cell ; width : 180px ; padding-left : 10px ; border-right : 1px dotted #d7ad7b ; } #content { display : table-cell ; width : 380px ; padding-left : 10px ; }

<div id="wrapper"> <div id="main"> <div id="nav"> navigation column content… </div> <div id="extras"> news headlines column content… </div> <div id="content">main article content… </div> </div> </div>