三栏布局：左右固定，中间自适应的几种方式_flex布局左右固定中间自适应-CSDN博客

本文链接：https://blog.csdn.net/weixin_44163871/article/details/124410395

1、flex布局（强烈推荐）

实现方式：左右两栏设置宽度，中间栏设置 flex:1,占满余下部分

<!DOCTYPE html>
<html lang="en">

<head>
    <title>flex布局</title>
    <style>
        .main{
            height: 60px;
            display: flex;
        }

        .left,
        .right{
            height: 100%;
            width: 200px;
            background-color: #ccc;
        }

        .content{
            flex: 1;
            background-color: #eee;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="content"></div>
        <div class="right"></div>
    </div>
</body>

</html>

2、grid布局

实现方式：左右两栏设置宽度，中间栏宽度auto

<!DOCTYPE html>
<html lang="en">

<head>
    <title>grid布局</title>
    <style>
        body {
            display: grid;
            grid-template-columns: 200px auto 200px;
            grid-template-rows: 60px;
        }

        .left,
        .right {
            background-color: #ccc;
        }

        .content {
            background-color: #eee;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
</body>

</html>

3、magin负值法

实现方式：左右两栏均左浮动，中间栏外层盒子设置浮动，中间栏设置左右两栏宽度的margin值，左栏设置margin -100%，右栏设置 margin值为负的盒子宽度。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>margin负值</title>

    <style>
        .left,
        .right {
            float: left;
            width: 200px;
            height: 60px;
            background-color: #eee;
        }

        .left {
             margin-left: -100%;
        }

        .right {
            margin-left: -200px;
        }

        .main {
            width: 100%;
            float: left;
            height: 60px;
        }

        .content {
            height: 60px;
            margin: 0 200px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="content"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>

</html>

4、自身浮动法

实现方式：左栏左浮动，右栏右浮动，中间栏放最后不浮动，设置左右margin值

<!DOCTYPE html>
<html lang="en">

<head>
    <title>自身浮动法</title>
    <style>
        .left,
        .right {
            height: 60px;
            width: 200px;
            background-color: #eee;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .content{
            height: 60px;
            background-color: #ccc;
            margin: 0 200px;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="content"></div>
</body>

</html>

5、绝对定位法

实现方式：左右两栏绝对定位，分别定位到盒子的两侧，中间栏采用margin值撑开盒子

注意：采用定位时，浏览器默认的padding或margin值会影响布局，需要初始化样式 margin:0;padding：0；

<!DOCTYPE html>
<html lang="en">

<head>
    <title>绝对定位法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left,
        .right {
            position: absolute;
            height: 60px;
            width: 200px;
            background-color: #ccc;
            top: 0;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }

        .content {
            height: 60px;
            margin: 0 200px;
            background-color: #eee;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
</body>

</html>