实现三栏布局的几种方式

引言

最近写站碰到了三栏布局，这种局平常写的少一直没有总结过正好借这次机会总结一波，加深一下印象。

绝对定位布局

<div class="content">
    <!-- 优先渲染内容部分 -->
    <div class="content_m">
        内容部分
    </div>
    <div class="content_l">
        左侧部分
    </div>
    <div class="content_r">
        右侧部分
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}

/* 左右绝对定位 */
.content {
    position: relative
}

.content_l,
.content_r {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
}

.content_l {
    left: 0;
    background: red;
}

.content_r {
    background: blue;
    right: 0;
}

.content_m {
    height: 100px;
    background: yellow;
    padding: 0 100px;
    /* 都可以 */
    /* margin: 0 100px; */
}

缺点：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况

圣杯布局

<div class="content">
    <!-- 优先渲染 -->
    <div class="content_m">
        内容部分
    </div>
    <div class="content_l">
        左侧部分
    </div>
    <div class="content_r">
        右侧部分
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}

.content {
    overflow: hidden;
}

.content>div {
    float: left;
    height: 100px;
}

.content_l,
.content_r {
    width: 100px;
}

.content_m {
    background: yellow;
    width: 100%;
    padding: 0 100px;
    box-sizing: border-box;
}

.content_l {
    background: red;
    margin-left: -100%;
}

.content_r {
    background: blue;
    margin-left: -100px
}

双飞翼布局

<div class="content">
    <!-- 优先渲染 -->
    <div class="main_con">
        <div class="content_m">
            内容部分
        </div>
    </div>
    <div class="content_l">
        左侧部分
    </div>
    <div class="content_r">
        右侧部分
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}

.content {
    overflow: hidden;
}

.content>div {
    float: left;
    height: 100px;
}

.content_l,
.content_r {
    width: 100px;
}

.main_con{
    width: 100%;
    height: 100px;
}

.content_m {
    background: yellow;
    width: 100%;
    height: 100%;
    margin: 0 100px;
}

.content_l {
    background: red;
    margin-left: -100%;
}

.content_r {
    background: blue;
    margin-left: -100px
}

弹性盒子布局

<div class="content">
    <div class="content_l">
        左侧部分
    </div>
    <div class="content_m">
        内容部分
    </div>
    <div class="content_r">
        右侧部分
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}

/* 采用弹性盒子 */
.content {
    overflow: hidden;
    display: flex;
}

.content_l,
.content_r {
    width: 100px;
    height: 100px;
}

.content_l {
 background: red;
}

.content_r {
    background: blue;
}

.content_m {
    flex: 1;
    height: 100px;
    background: yellow;
}

对比圣杯布局和双飞翼布局

都是左右固定中间自适应的布局，中间部分优先渲染
解决方案基本一致，都是左浮动，然后解决中间部分别覆盖的问题。
解决中间部分内容覆盖时，圣杯布局设置父元素的padding，双飞翼布局在中间部分嵌套一个div，内容设置margin。实际上，双飞翼布局就是圣杯布局的改进方案。

总结

pc端用双飞翼布局更好些
移动端用弹性布局更优雅

实现三栏布局的几种方式

引言

对比圣杯布局和双飞翼布局

总结

推荐阅读更多精彩内容