两列布局（左边定宽，右边自适应）

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

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

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

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

一、inline-block + calc

思路

两列：使用

inline-block

使两个

div

处于同一行中

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

实现

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

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

二、float + calc

思路

两列：使用

float

使两个

div

处于同一行中

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

实现

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

三、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: ;
    margin-right: ;
}
.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: ;
}
.right {
    margin-left: ;
}
复制代码
           

参考

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

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