溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“如何用Table-cell屬性讓div實(shí)現(xiàn)定位”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
從前在頁面布局的時(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 > </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)簽一樣。
效果圖： 
“如何用Table-cell屬性讓div實(shí)現(xiàn)定位”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
