CSS三栏布局探讨——中间固定宽度两边自适应宽度

实现步骤

实现三栏布局的基本流程如下：

首先，我们需要一个包含三个子元素的容器 div。
给容器 div 设置左右两个子元素的宽度为 0，此时左右两个子元素会自动隐藏掉。
给中间子元素设置固定宽度，使其始终占据页面中间位置。
最后，分别给左右两个子元素设置相对定位，并通过 left 和 right 属性控制它们的位置。此处的 left 和 right 值应设置为中间子元素的宽度值。

代码示例1

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS三栏布局探讨——中间固定宽度两边自适应宽度</title>
    <style>
        .container {
            position: relative;
        }
        .left, .right {
            position: relative;
            float: left;
            width: 0;
        }
        .left {
            left: -100px;
        }
        .right {
            right: -100px;
        }
        .center {
            position: relative;
            float: left;
            width: 800px;
            background-color: #eee;
            margin: 0 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">左边栏</div>
        <div class="center">中间栏</div>
        <div class="right">右边栏</div>
    </div>
</body>
</html>

在此代码示例中，我们首先给容器 div 添加了一个相对定位样式，接着分别给左右两个子元素添加了宽度为 0 的样式，并使用相对定位将其隐藏。最后，我们给中间子元素设置了固定宽度，并使用 margin 实现了左右两个子元素的自适应宽度效果。

代码示例2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS三栏布局探讨——中间固定宽度两边自适应宽度</title>
    <style>
        .container {
            display: flex;
        }
        .left, .right {
            flex: 1;
        }
        .center {
            flex: 0 0 800px;
            background-color: #eee;
            margin: 0 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">左边栏</div>
        <div class="center">中间栏</div>
        <div class="right">右边栏</div>
    </div>
</body>
</html>

在此代码示例中，我们使用了 flex 布局来实现三栏布局。我们给容器 div 添加了一个 flex 属性，使其显示为一个 flex 容器。接着，我们分别给左右两个子元素添加了一个 flex 属性，使它们自适应宽度。最后，我们给中间子元素设置了固定宽度，并使用 flex 属性 "0 0" 来使其在主轴方向（即左右方向）上不伸缩。