css布局之左侧宽度固定，右侧自适应两栏布局

最新推荐文章于 2021-04-12 13:49:42 发布

Dark_programmer

最新推荐文章于 2021-04-12 13:49:42 发布

阅读量345

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/Dark_programmer/article/details/105318917

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

布局代码如下，文章统一使用布局

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

方法一、

左侧左浮动，右侧margin-left

父容器使用overflow: hidden意在解决浮动之后高度塌陷的问题。
左侧使用左浮动，右侧设置margin-left固定距离即可

效果图：
在这里插入图片描述

wrapper样式：

.wrapper {
        height: 200px;
        width: 100%;
        background: aliceblue;
        overflow: hidden;
      }

左侧div样式及右侧div样式

.left {
        width: 200px;
        height: 150px;
        background: yellowgreen;
        float: left;
      }
 .right {
        height: 150px;
        background: sienna;
        margin-left: 200px;
      }

方法二、

float + BFC方法

左侧浮动，但是右侧盒子通过overflow: auto;形成了BFC，因此右侧盒子不会与浮动的元素重叠。

wrapper样式：

.wrapper {
        height: 200px;
        width: 100%;
        background: aliceblue;
        overflow: hidden;
      }

左侧div样式及右侧div样式

.left {
        width: 200px;
        height: 150px;
        background: yellowgreen;
        float: left;
      }
 .right {
        height: 150px;
        background: sienna;
        overflow: auto;
      }

效果图：在这里插入图片描述

方法三、

左侧绝对定位，右侧margin-left

父容器使用 position: relative 是为了给子元素一个参照
左侧使用 position: absolute，top,left为0 是为了固定位置，右侧仍然设置margin-left固定距离即可

效果图：
在这里插入图片描述
wrapper样式：

.wrapper {
        height: 200px;
        width: 100%;
        background: aliceblue;
        position: relative;
      }

左侧div样式及右侧div样式

.left {
        width: 200px;
        height: 150px;
        background: yellowgreen;
        position: absolute;
        top: 0;
        left: 0;
      }
 .right {
        height: 150px;
        background: sienna;
        margin-left: 200px;
      }

缺点:

使用了绝对定位，若是用在某个div中，需要更改父容器的position。
没有清除浮动的方法，若左侧盒子高于右侧盒子，就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况。

方法四、

flex弹性布局

父容器设置 display: flex;让子div成为容器方便管理
左侧固定宽度，右侧自动填充剩余空间

关于flex属性，不了解的可借此传送门 → 弹性布局 flex

效果图：
在这里插入图片描述

wrapper样式：

.wrapper {
        height: 200px;
        width: 100%;
        background: aliceblue;
        display: flex;
      }

左侧div样式及右侧div样式

.left {
        width: 200px;
        height: 150px;
        background: yellowgreen;
        flex: 0 0 200px;
      }
 .right {
        height: 150px;
        background: sienna;
        flex: 1;
      }

Dark_programmer

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css布局之左侧宽度固定，右侧自适应两栏布局

布局代码如下，文章统一使用布局<body> <div class="wrapper"> <div class="left">左侧宽度固定</div> <div class="right">右侧宽度自适应</div> </div></body>方法一、左侧...
复制链接

扫一扫