css实现三栏布局-优快云博客

本文介绍四种实现网页布局中左右定宽、中间自适应的方法：使用position定位、float属性配合margin撑开、margin负值法及flex布局法。通过不同技术手段，实现响应式网页设计，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

左右定宽，中间自适应

（1） 使用position定位实现，即左右两栏使用position进行定位，中间栏使用margin进行定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left,.right{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #d7d4f0;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .center{
            margin:0 100px 0 100px;
            height: 100px;
            background-color: #2aa198;
        }
    </style>
</head>
<body>
<div>
    <div class="left">
        左侧定宽
    </div>
    <div class="right">
        右侧定宽
    </div>
    <!--放在最后，写在中间没有效果-->
    <div class="center">
        中间自适应
    </div>
</div>
</body>
</html>

效果图如下：

（2）使用左右两栏使用float属性，中间栏使用margin属性进行撑开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left,.right{
            width: 100px;
            height: 100px;
            background-color: #d7d4f0;
        }
        .left{
           float: left;
        }
        .right{
            float: right;
        }
        .center{
            margin: 0 100px;
            height: 100px;
            background-color: #2aa198;
        }
    </style>
</head>
<body>
<div>
    <div class="left">
        左侧定宽
    </div>
    <div class="right">
        右侧定宽
    </div>
    <!--放在最后，写在中间没有效果-->
    <div class="center">
        中间自适应
    </div>
</div>
</body>
</html>

效果图如下：

（3）margin负值法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            position: relative;
            float: left;
            width: 100px;
            height: 100px;
            margin-right: -100px;
            background-color: #0baae4;
        }
        .center{
            float: left;
            width: 100%;
            height: 100px;
            background-color: #A8A297;
        }
        .right{
            position: relative;
            float: right;
            width: 100px;
            height: 100px;
            margin-left: -100px;
            background-color: #0baae4;
        }
        p{
            margin:0 100px 0 100px;
            background-color: #2aa198;
        }
    </style>
</head>
<body>
<div>
    <div class="left">
        左侧定宽
    </div>
    <div class="center">
        <p>中间自适应</p>
    </div>
    <div class="right">
        右侧定宽
    </div>
</div>
</body>
</html>

效果图如下：

（4） flex法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bj{
            display: flex;
        }
        .left,.right{
            width: 100px;
            height: 100px;
            background-color: #d7d4f0;
        }
        .center{
            width: 100%;
            height: 100px;
            background-color: #2aa198;
        }
    </style>
</head>
<body>
<div class="bj">
    <div class="left">
        左侧定宽
    </div>
    <div class="center">
        中间自适应
    </div>
    <div class="right">
        右侧定宽
    </div>
</div>
</body>
</html>

效果图如下：

左侧，中间定宽，右侧自适应

margin负值法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            position: relative;
            float: left;
            width: 100px;
            height: 100px;
            background-color: #A8A297;
        }
        .center{
            position: relative;
            float: left;
            width: 100px;
            height: 100px;
            background-color: #0baae4;
        }
        .right{
            float: right;
            width: 100%;
            height: 100px;
            background-color: #d7d4f0;
            margin-left: -200px;
        }
        p{
            margin: 0 0 0 200px;
            background-color: #2aa198;
        }
    </style>
</head>
<body>
<div>
    <div class="left">
        左侧定宽
    </div>
    <div class="center">
        中间定宽
    </div>
    <div class="right">
        <p>右侧自适应</p>
    </div>
</div>
</body>
</html>

效果图如下：