css实现左右固定中间自适应三栏布局

最新推荐文章于 2024-09-12 15:53:16 发布

刘懿儇

最新推荐文章于 2024-09-12 15:53:16 发布

阅读量510

点赞数 8

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/liu62615/article/details/141504962

版权

1.利用浮动

将左右两栏分别设置为向左和向右浮动，然后中间栏通过设置overflow: hidden来清除浮动的影响，从而实现自适应宽度。

<body>

  <div class="container">
    <div class="left">左栏</div>
    <div class="right">右栏</div>
    <div class="middle">中间栏</div>
  </div>

  <style>
    .container {
      width: 100%;
      overflow: hidden;
    }

    .left {
      float: left;
      width: 200px;
      background-color: lightblue;
    }

    .right {
      float: right;
      width: 200px;
      background-color: lightgreen;
    }

    .middle {
      margin-left: 200px;
      /* 左侧栏的宽度 */
      margin-right: 200px;

      background-color: lightyellow;
    }
  </style>
</body>

2.postion

用绝对定位将左右两栏固定在两侧，中间栏通过设置左右边距来让出左右两栏的空间，实现自适应

为什么不使用绝对定位：

在三栏布局中，如果使用固定定位，左右两栏会一直固定在视口的两侧，不会随着中间内容的滚动而调整位置，这可能会导致在页面较长时，左右栏与中间内容的关联性变得很弱，视觉上也可能会显得不协调。

通过将包含三栏的容器元素设置为相对定位（position: relative），然后将左右两栏设置为绝对定位，就可以使左右两栏相对于容器进行定位。这样，当中间内容滚动时，左右两栏会保持与中间内容的相对位置不变，视觉上更加协调

固定定位在布局上相对较为局限，因为它始终固定在视口的特定位置，不会随着页面内容的布局变化而调整。

在三栏布局中，中间自适应的部分可以根据内容的多少自动调整宽度，而左右两栏通过绝对定位可以固定在容器的两侧，不会受到中间内容宽度变化的影响

<body>

  <div class="container">
    <div class="left">左栏</div>
    <div class="right">右栏</div>
    <div class="middle">中间栏</div>
  </div>

  <style>
    .container {
      position: relative;
      width: 100%;
    }

    .left {
      position: absolute;
      left: 0;
      width: 200px;
      background-color: lightblue;
    }

    .right {
      position: absolute;
      right: 0;
      width: 200px;
      background-color: lightgreen;
    }

    .middle {
      margin: 0 200px 0 200px;
      background-color: lightyellow;
    }
  </style>
</body>

3.display: flex;

将中间栏的flex属性设置为1，它会自动占据剩余的空间，实现自适应宽度。

<body>
  <div class="container">
    <div class="left">左栏</div>
    <div class="middle">中间栏</div>
    <div class="right">右栏</div>
  </div>
  <style>
    .container {
      display: flex;
    }

    .left {
      width: 200px;
      background-color: lightblue;
    }

    .right {
      width: 150px;
      background-color: lightgreen;
    }

    .middle {
      flex: 1;
      background-color: lightyellow;
    }
  </style>
</body>

4.display: grid;

将中间栏的grid中间属性设置为1fr，它会自动占据剩余的空间，实现自适应宽度。

<body>
  <div class="container">
    <div class="left">左侧栏</div>
    <div class="center">中间栏</div>
    <div class="right">右侧栏</div>
  </div>
  <style>
    .container {
      display: grid;
      grid-template-columns: 200px 1fr 200px;
      /* 左侧栏200px，中间栏自适应，右侧栏200px */
      height: 100px;
      /* 固定高度 */
    }

    .left,
    .right {
      background-color: #ebc4c4;
      /* 背景颜色 */
    }
    .center {
      background-color:#a5e1bf ;
      /* 背景颜色 */
    }
  </style>
</body>