DIV CSS 佈局教程網

你要是用div的話，一會inline一會float很是蠻煩。怎麼樣才能在使用div的時候也能享受的table定位的好處呢？下面有個好的方法 從前在頁面布局的時候，table被大量的使用，其中一個好處便是元素可以輕松的定位，不會出現什麼竄行的問題。你要是用div的話，一會inline一會float很是蠻煩。怎麼樣才能在使用div的時候也能享受的table定位的好處呢？下面舉個例子：

復制代碼代碼如下:
<!--Html --!>
<div id="parent">
<div id="c1"></div>
<div id="c2"></div>
</div>

一個父容器，裝有兩個子容器，在c1寬度不確定的情況下，如何讓c2填充滿父容器呢？可以這樣：

復制代碼代碼如下:
<span style="white-space:pre"> </span>#parent{
width: 90%;
margin: 50px auto;
border: #333333 solid 1px;
padding: 10px;
display: table;
}
#c1{
height: 50px;
background: #f30;
width: 35%;
display: table-cell;
}
#c2{
height: 50px;
background: #03f;
display: table-cell;
}

將父容器的display指定為table，這樣浏覽器便會把parent當作一個table對待，然後向table中添加元素，元素具有的效果就會和直接使用td標簽一樣。

效果圖：