【干货】解锁常用的双栏布局姿势

Jessica_酱

2020年09月25日 10:23

1.场景前提

本文讨论的是在开发过程中，需要用到双栏布局的场景，这是在大多数日常开发中极其常见的设计，也是面试中的经典高频题。如：左列定宽，右列自适应。两栏布局要的效果大致如下图所示：

2.实现方式一：float+BFC

BFC从何说起呢？这主要是我们在设置CSS样式时用到了BFC的特性：

（1）浮动元素的块状兄弟元素会无视浮动元素的位置，且会尽可能的占满一行，这样一来，该兄弟元素就会被浮动元素覆盖；

（2）如果浮动元素的块状兄弟元素（如：div）为BFC，则不会占满一行，而是根据浮动元素的宽度，占据该行剩下的宽度，避免其与浮动元素重叠；

（3）浮动元素与块状兄弟元素之间的margin会生效，这将继续减少兄弟元素的高度。

2.1 HTML文本长啥样？

如下所示：

<div class="container">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right-content-01</p>
    <p class="content2">right-content-02</p>
  </div>
</div>
复制代码

2.2 CSS长啥样？

.container {
  width: 100%;
}
.left {
  float: left;
  width: 20%;
  height: 100px;
  margin-right: 20px;
  background-color: #4bbf4d;
}
.right {
  overfloe: hidden;
  height: 100px;
  background-color: #14adea;
}
.content2 {
  clear: both;
}
复制代码

这里需要注意一下：overflow: hidden就触发了BFC，从而与float结合实现双栏布局。

2.3 代码地址

代码地址见：codepen.io/Jessica1992…，小伙伴可以自行修改尝试一下。

PS：由于浮动会影响后续元素的布局，如上图抛出来的right-content-02其实会受到float设置的影响，因此我加上了class="content2"这个类，清除浮动，使得right-content-02得以正常布局。

3. 实现方式二：flex

flex的设计之初就是为了做自适应。只需要用上flex: 1，就能让右边的栏分到整体减去left栏的宽度上去。实现效果如下：

3.1 HTML文本长啥样？

<div class="container">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right-content-01</p>
  </div>
</div>
复制代码

3.2 CSS长啥样？

.container {
  display: flex;
  width: 600px;
}
.left {
  width: 200px;
  height: 100px;
  margin-right: 10px;
  background-color: #4bbf4d;
  text-align: center;
}
.right {
  flex: 1;
  height: 100px;
  background-color: #14adea;
  text-align: center;
}
复制代码

3.3 代码地址

代码地址见：codepen.io/Jessica1992…，小伙伴可以自行修改尝试一下。

4. 实现方式三：absolute

方法：将父级元素设置为相对定位，左边元素设置为300px(小伙伴随意就好)，右边元素设置为绝对定位，左边元素定位为300px，其余方向定位为0。

4.1 HTML文本长啥样？

<div class="container">
  <div class="left">left-content</div>
  <div class="right">right-content</div>
</div>
复制代码

4.2 CSS长啥样？

.container {
  position: relative;
  width: 700px;
  height: 100px;
}
.left {
  width: 300px;
  height: 100px;
  margin-right: 10px;
  background-color: #4bbf4d;
  text-align: center;
}
.right {
  position: absolute;
  height: 100px;
  background-color: #14adea;
  text-align: center;
  top: 0;
  left: 300px;
  right: 0;
  bottom: 0;
}
复制代码

PS: 这里将container的width设置为700px是为了让大家更加容易看出两栏布局的特点，从下图可以看出left-content占用了300px，right-content占用了400px；

4.3 代码地址

代码地址见：codepen.io/Jessica1992…，小伙伴可以自行修改尝试一下。