CSS：Table-cell屬性的妙用讓div也能享受table定位的好處
發(fā)布時(shí)間：2014-09-04 09:01:45 作者：佚名 
我要評(píng)論
我要評(píng)論你要是用div的話，一會(huì)inline一會(huì)float很是蠻煩。怎么樣才能在使用div的時(shí)候也能享受的table定位的好處呢？下面有個(gè)好的方法
從前在頁面布局的時(shí)候，table被大量的使用，其中一個(gè)好處便是元素可以輕松的定位，不會(huì)出現(xiàn)什么竄行的問題。你要是用div的話，一會(huì)inline一會(huì)float很是蠻煩。怎么樣才能在使用div的時(shí)候也能享受的table定位的好處呢？下面舉個(gè)例子：
<!--HTML --!>
<div id="parent">
<div id="c1"></div>
<div id="c2"></div>
</div>
一個(gè)父容器，裝有兩個(gè)子容器，在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，這樣瀏覽器便會(huì)把parent當(dāng)作一個(gè)table對(duì)待，然后向table中添加元素，元素具有的效果就會(huì)和直接使用td標(biāo)簽一樣。
效果圖：
復(fù)制代碼
代碼如下:<!--HTML --!>
<div id="parent">
<div id="c1"></div>
<div id="c2"></div>
</div>
一個(gè)父容器，裝有兩個(gè)子容器，在c1寬度不確定的情況下，如何讓c2填充滿父容器呢？可以這樣：
復(fù)制代碼
代碼如下:<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，這樣瀏覽器便會(huì)把parent當(dāng)作一個(gè)table對(duì)待，然后向table中添加元素，元素具有的效果就會(huì)和直接使用td標(biāo)簽一樣。
效果圖：
相關(guān)文章
CSS position屬性和實(shí)例應(yīng)用演示
這篇文章主要介紹了CSS position屬性和實(shí)例應(yīng)用演示,absolute（絕對(duì)定位）,relative（相對(duì)定位）,relative與absolute的結(jié)合使用以及fixed(固定定位),需要的朋友可以參考下2017-08-11
css position定位屬性_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹元素的Position屬性，此屬性可以設(shè)置元素在頁面的定位方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-22css關(guān)于position屬性的用法詳解(絕對(duì)定位和相對(duì)定位的混淆)
下面小編就為大家?guī)硪黄猚ss關(guān)于position屬性的用法詳解(絕對(duì)定位和相對(duì)定位的混淆)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-08總結(jié)CSS的position定位屬性在使用的一些重點(diǎn)
這篇文章主要總結(jié)了CSS的position定位屬性在使用的一些重點(diǎn),包括對(duì)絕對(duì)定位和相對(duì)定位等的強(qiáng)調(diào),需要的朋友可以參考下2016-05-31- 這篇文章主要介紹了圖解CSS中position屬性的定位用法,重點(diǎn)講解了相對(duì)定位和絕對(duì)定位在頁面布局中的作用,需要的朋友可以參考下2016-04-28
采用CSS定位屬性實(shí)現(xiàn)Html中DIV層疊與懸浮
DIV沒有懸浮一說，更準(zhǔn)確的應(yīng)為層疊或者固定，下面為大家介紹的是通過CSS定位屬性來實(shí)現(xiàn)這一效果2014-05-18CSS常用樣式簡(jiǎn)單的總結(jié)包括定位、顯示等屬性
CSS常用樣式包括定位、顯示、寬高和剪裁等屬性，這些都是我們大家經(jīng)常使用到的，在本文做個(gè)總結(jié)，以備不時(shí)之需2014-04-18css中關(guān)于定位屬性position為fixed的使用記載
當(dāng)一個(gè)div想要定位時(shí)，我們第一反應(yīng)是position屬性，而position屬性除了默認(rèn)值外，還有absolute,relative和fixed，下面有個(gè)不錯(cuò)的示例，不懂的朋友可以參考下2013-11-11使用CSS布局定位屬性輕松實(shí)現(xiàn)優(yōu)美站點(diǎn)布局
本文為大家介紹CSS布局定位屬性，熟練的使用可以輕松實(shí)現(xiàn)優(yōu)美站點(diǎn)布局，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-09-16- POSITION屬性用來決定元素在頁面上的位置，其定位屬性有多個(gè)，下面一一為大家介紹下，希望大家在使用過程中可以用到2013-09-09
