CSS布局左侧定宽，右侧自适应_html/css

CSS布局左侧定宽，右侧自适应_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-24 11:45:58

asal

937 orang telah melayarinya

　　左侧定宽，右侧自适应

有很多种方法可以实现

缩小窗口试试看？

方案一：

左边左浮动，右边加个margin-left

查看 demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(1)</title><style type="text/css">    *{margin: 0;padding: 0;}    .left{        float: left;        width: 200px;        border: 1px solid #333;        background: #aaa;    }    .right{        margin-left:200px;        border: 1px solid #333;        background: #ccc;        word-break: break-all;    }</style></head><body>    <div class="left">    <h4>left</h4>        <p>oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000</p>    </div>    <div class="right">    <h4>right</h4>        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888</p>    </div></body></html>

Salin selepas log masuk

方案二：

左边左浮动，右边overflow：hidden 不过这种方法IE6下不兼容

查看 demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(2)</title><style type="text/css">    *{margin: 0;padding: 0;}    .left{        float: left;        width: 200px;        border: 1px solid #333;        background: #aaa;    }    .right{        overflow: hidden;        border: 1px solid #333;        background: #ccc;        word-break: break-all;    }</style></head><body>    <div class="left">    <h4>left</h4>        <p>oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000</p>    </div>    <div class="right">    <h4>right</h4>        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888</p>    </div></body></html>

Salin selepas log masuk

方案三：

左边使用绝对定位，右边使用margin-left

查看 demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(3)</title><style type="text/css">    *{margin: 0;padding: 0;}    .left{        position: absolute;        top: 0;        left: 0;        width: 200px;        border: 1px solid #333;        background: #aaa;    }    .right{        margin-left:200px;        border: 1px solid #333;        background: #ccc;        word-break: break-all;    }</style></head><body>    <div class="left">    <h4>left</h4>        <p>oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000</p>    </div>    <div class="right">    <h4>right</h4>        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888</p>    </div></body></html>

Salin selepas log masuk

方案四：

左边绝对定位，右边也绝对定位

查看 demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(4)</title><style type="text/css">    *{margin: 0;padding: 0;}    .left{        position: absolute;        top: 0;        left: 0;        width: 200px;        border: 1px solid #333;        background: #aaa;    }    .right{        position: absolute;        left: 200px;        top:0;        border: 1px solid #333;        background: #ccc;        word-break: break-all;    }</style></head><body>    <div class="left">    <h4>left</h4>        <p>oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000</p>    </div>    <div class="right">    <h4>right</h4>        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888</p>    </div></body></html>

Salin selepas log masuk

方案五：

这种方法相对来说就有点复杂了，右边的div里边还有一个div

查看 demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(5)</title><style type="text/css">    *{margin: 0;padding: 0;}    .left{        float: left;        margin-right: -100%;        width: 200px;        border: 1px solid #333;        background: #aaa;    }    .right{        float: left;        width: 100%;    }    .inner-right{         margin-left: 200px;        border: 1px solid #333;        background: #ccc;        word-break: break-all;    }</style></head><body>    <div class="left">    <h4>left</h4>        <p>oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000</p>    </div>    <div class="right">    <div class="inner-right">    <h4>right</h4>        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888</p>        </div>    </div></body></html>

Salin selepas log masuk

CSS布局 左侧定宽，右侧自适应_html/css_WEB-ITnose

CSS布局左侧定宽，右侧自适应_html/css_WEB-ITnose