Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
<div class="parent">
<div class="left">左: 定寬</div>
<div class="right">右: 自適應(yīng)</div>
</div>
過以下 CSS 代碼實(shí)現(xiàn)兩列布局效果
.parent{
display: table;
table-layout: fixed;
}
.left, .right{display: table-cell;}
.left{width:100px;}
優(yōu)點(diǎn):
瀏覽器兼容性比較好
缺點(diǎn):
將所有元素的 display 屬性設(shè)置為 table 相關(guān)值, 受到相應(yīng)制約
<div class="parent">
<div class="left">左: 定寬</div>
<div class="right">右: 自適應(yīng)</div>
</div>
過以下 CSS 代碼實(shí)現(xiàn)兩列布局效果
.left{
width:100px;
float:left;
}
.right{overflow:hidden;}
優(yōu)點(diǎn):
上述解決方案中的問題在此解決方案中都沒有
缺點(diǎn):
overflow 屬性不僅解決了兩列布局問題, 同時(shí)設(shè)置了內(nèi)容溢出的情況
<div class="parent">
<div class="left">左: 定寬</div>
<div class="right-fix">
<div class="right">右: 自適應(yīng)</div>
</div>
</div>
過以下 CSS 代碼實(shí)現(xiàn)兩列布局效果:
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。