CSS布局 -- 左侧定宽，右侧自适应

2023-03-13 09:50:30

　　左侧定宽，右侧自适应

有很多种方法可以实现

缩小窗口试试看？

方案一：

左边左浮动，右边加个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>

方案二：

左边左浮动，右边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>

方案三：

左边使用绝对定位，右边使用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>

方案四：

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

查看 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>

方案五：

这种方法相对来说就有点复杂了，右边的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>

码农公寓

相关文章