CSS layout: fixed width on the left, adaptive on the right_html/css

CSS layout: fixed width on the left, adaptive on the right_html/css_WEB-ITnose

WBOY

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

Original

915 people have browsed it

Fixed width on the left, adaptive on the right

There are many ways to achieve

Reduce the window Give it a try?

Option 1:

Float on the left and add a margin-left on the right

View 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>

Copy after login

Option 2:

Left floating on the left, overflow on the right: hidden But this This method is not compatible under IE6

View 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>

Copy after login

Option three:

Use absolute positioning on the left and margin-left on the right

Viewdemo

<!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>

Copy after login

Option 4:

Absolute positioning on the left and absolute positioning on the right

Viewdemo

<!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>

Copy after login

Option 5:

This method is relatively complicated, the div on the right There is also a div inside

Viewdemo

<!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>

Copy after login