实现左侧固定宽度, 右侧自适应的两栏布局常见方法

两栏布局方案

实现左侧固定, 右侧自适应的布局方案, 常见的几种, 写了一个各个方案实现效果的Demo, 可以通过这里查看: 预览

首先统一html结构

<div class="container">
    <div class="left">
        <p>这是左边的盒子</p>
    </div>
    <div class="right">
        <p>这是右边的盒子</p>
    </div>
</div>
复制代码

然后统一样式, 左侧固定宽度

.container {
    padding: 10px;
    border: 1px dashed #dedede;
}

.left {
    width: 120px;
    border: 2px solid #2DB3E4;
}

.right {
    border: 2px solid #F37EC1;
}
复制代码

1. 双float方案

利用CSS的calc()函数来计算右侧宽度值, 需要清除父容器的浮动

设置box-sizing: border-box;是为了方便计算

.container::after {
    content: "";
    display: block;
    clear: both;
}

.left, .right {
    box-sizing: border-box;
    float: left;
}

.right {
    width: calc(100% - 120px);
}
复制代码

2. float + margin-left方案

block的元素盒子的宽度具有填满父容器，并随着父容器的宽度自适应的流动特性。

并且 block元素和浮动元素并排时, block元素会忽视浮动元素

因此给左侧盒子浮动, 右侧设置margin-left保持距离即可

.container::after {
    content: "";
    display: block;
    clear: both;
}

.left {
    box-sizing: border-box;
    float: left;
}

.right {
    margin-left: 120px;
}
复制代码

3. absolute + margin-left

与方案2原理大致相同, absolute也是会脱离文档流

不用清除浮动, 但也带来了新的问题

1. 父容器需要改变position
2. 如果左侧盒子比右侧盒子高度, 那么左侧盒子会超出父容器高度

.left {
    box-sizing: border-box;
    position: absolute;
}

.right {
    margin-left: 120px;
}
复制代码

4. float + BFC 方法

这种方法不用计算宽度, 原理是BFC可以阻止元素被浮动元素覆盖

.container::after {
    content: "";
    display: block;
    clear: both;
}

.left {
    float: left;
}

.right {
    margin-left: 0;
    overflow: auto;
}
复制代码

父容器需要清除浮动, 右侧盒子设置了overflow: auto;形成了BFC

5. flex方案

flex可以说是最好的方案了

直接给右侧盒子设置flex: 1, 即可自动填满宽度

.container {
    display: flex;
}

.right {
    flex: 1
}
复制代码

转载于:https://juejin.im/post/5c7548e2518825620b45303f