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>