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

最新推荐文章于 2025-09-10 10:09:14 发布

weixin_34226706

最新推荐文章于 2025-09-10 10:09:14 发布

阅读量63

点赞数

文章标签： xhtml

本文介绍了一种网页布局技巧，通过不同方法实现左侧固定宽度、右侧自适应的内容布局，包括使用浮动、绝对定位等多种方式。

　　左侧定宽，右侧自适应

有很多种方法可以实现

缩小窗口试试看？

方案一：

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