两列布局（左边定宽，右边自适应）-CSDN博客

这种布局，我的思路是考虑两个方面：两列和定宽

两列意味着是水平布局，也就是元素在同一行，先解决这点。

定宽意味着左边宽度固定，右边宽度随着窗口大小而变。

实现可参考链接 codepen.io/youngmaxer/…

一、inline-block + calc

思路

两列：使用 inline-block 使两个 div 处于同一行中

定宽：左边设置固定宽度即可，右边根据计算来确定宽度以实现自适应

实现

<div class="wrapper">
  <div class="left">
    左边
  </div>
  <div class="right">
    右边
  </div>
</div>
复制代码

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

二、float + calc

思路

两列：使用 float 使两个 div 处于同一行中

定宽：左边设置固定宽度即可，右边根据计算来确定宽度以实现自适应

实现

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

三、position + calc

思路

两列：使用 absolute 使两个 div 处于同一行中

定宽：左边设置固定宽度即可，右边根据计算来确定宽度以实现自适应

实现

.parent {
    position: relative;
    .left {
        position: absolute;
        left: 0;
        width: 100px;
    }
    .right {
        position: absolute;
        left: 120px;
        width: calc(100% - 120px);
    }
}
复制代码

四、float + BFC

思路

两列：使用 float 和 overflow: hidden 利用 BFC 的特性使元素在一行上

定宽：左边设置固定宽度即可，右边由于 BFC 宽度会自适应

实现

.left {
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right {
    overflow: hidden;
}
复制代码

五、flex

思路

两列：默认 flex 布局元素在水平方向上

定宽：左边设置固定宽度即可，右边利用 flex: 1 会将剩余空间占据实现宽度自适应。

实现

.parent {
    display: flex;
    .left {
        width: 100px;
        margin-right: 20px;
    }
    .right {
        flex: 1;
    }
}
复制代码

六、float + margin

思路

两列：使用 float ，由于脱离文档流，所以元素在同一行上

定宽：左边设置固定宽度即可，右边通过 margin-left 从形式上隔离二者的重叠

实现

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

参考

《两列自适应布局方案整理》 segmentfault.com/a/119000000…
《页面布局：两列布局》 www.jianshu.com/p/d0388e8f4…