【css】两栏布局

程序媛小y

已于 2022-10-13 17:05:37 修改

阅读量735

点赞数 1

分类专栏： css 文章标签： css css3 前端

于 2022-04-10 00:34:10 首次发布

本文链接：https://blog.csdn.net/weixin_52834435/article/details/124071354

版权

css 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

【css】两栏布局

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应。

文章目录

【css】两栏布局

1.浮动 + margin

先将左元素设置定宽为100px，并左浮动。

然后给右元素设置margin-left，值等于左元素的宽度。

<style>
      .container {
        background-color: bisque;
      }
      .left {
        width: 100px;
        background-color: aquamarine;
        float: left;
      }
      .right {
        background-color: brown;
        margin-left: 100px;
      }
    </style>

  <body>
    <div class="container">
      <div class="left">左侧固定</div>
      <div class="right">右侧自适应</div>
    </div>
  </body>

在这里插入图片描述

2.浮动 + BFC

触发BFC后，右元素就会环绕着浮动的元素，不会被浮动的元素所覆盖。

<style>
      .container {
        background-color: bisque;
      }
      .left {
        width: 100px;
        background-color: aquamarine;
        float: left;
      }
      .right {
        background-color: brown;
        overflow: hidden;
      }
    </style>

  <body>
    <div class="container">
      <div class="left">左侧固定</div>
      <div class="right">右侧自适应</div>
    </div>
  </body>

在这里插入图片描述

3.定位 + margin-left

先给父元素和左子元素设置定位，然后给左子元素设置left: 0 并设置宽度，然后给右子元素设置 margin-left，值等于左子元素的宽度。

<style>
      .container {
        position: relative;
        background-color: bisque;
      }
      .left {
        width: 100px;
        background-color: aquamarine;
        position: absolute;
        left: 0;
      }
      .right {
        background-color: brown;
        margin-left: 100px;
      }
    </style>

  <body>
    <div class="container">
      <div class="left">左侧固定</div>
      <div class="right">右侧自适应</div>
    </div>
  </body>

在这里插入图片描述

4.定位

与上面的第三种方式类似，只不过是给右子元素设置定位和 left，而不是用margin-left

<style>
      .container {
        position: relative;
        background-color: bisque;
      }
      .left {
        width: 100px;
        background-color: aquamarine;
        position: absolute;
        left: 0;
      }
      .right {
        background-color: brown;
        position: absolute;
        left: 100px;
      }
    </style>

  <body>
    <div class="container">
      <div class="left">左侧固定</div>
      <div class="right">右侧自适应</div>
    </div>
  </body>

5. flex

给父容器设置flex布局，然后给右子元素设置 flex: 1。

<style>
      .container {
        display: flex;
        background-color: bisque;
      }
      .left {
        width: 100px;
        background-color: aquamarine;
      }
      .right {
        background-color: brown;
        flex: 1;
      }
    </style>

  <body>
    <div class="container">
      <div class="left">左侧固定</div>
      <div class="right">右侧自适应</div>
    </div>
  </body>

程序媛小y

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【css】两栏布局

【css】两栏布局一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应。文章目录【css】两栏布局1.浮动 + margin2.浮动 + BFC3.定位 + margin-left4.定位5. flex1.浮动 + margin先将左元素设置定宽为100px，并左浮动。然后给右元素设置margin-left，值等于左元素的宽度。<style> .container { background-color: bisque; } .le
复制链接

扫一扫