div構建table

一、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 :將對象做爲表格行組顯示

 

 

二、代碼段以下

 

 

#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>