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