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

·  阅读 481

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…,小伙伴可以自行修改尝试一下。

分类:
阅读
标签:
分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改