五种方法实现前端PC页面三栏布局（圣杯布局）

写在前面

做PC端的小伙伴肯定遇到过需要实现三栏布局，即左右两侧宽度固定，中奖宽度自适应，而且这也是面试中经常会问到的问题，一般现在用到的会有五种解决方案，包括：浮动布局、绝对定位布局、flexbox布局、表格布局、网格布局

显示效果

代码实现

这里我们将左右两侧宽度固定为300px，高度300px

第一种——浮动布局

优点：兼容性好
缺点：有高度坍塌的问题，需清除浮动

// HTML
<div class="block">
<div class="left">左侧宽度300px</div>
<div class="right">右侧宽度300px</div>
// 中间区域写在左右两个区域之后
<div class="center">
<h1>中间宽度自适应</h1>
</div>
</div>

// less
.block{
color: #fff;
font-size: 20px;
div{
height: 300px;
}
.left, .right{
width: 300px;
}
.left{
background: blue;
float: left; // 左浮
}
.right{
background: green;
float: right; // 右浮
}
.center{
background: #f95644;
}
}

第二种——绝对定位布局

优点：快捷，不易出现问题
缺点：脱离文档流，子元素也将脱离文档流，可使用性比较差

// HTML
<div class="block">
<div class="left">左侧宽度300px</div>
<div class="center">
<h1>中间宽度自适应</h1>
</div>
<div class="right">右侧宽度300px</div>
</div>

// less
.block{
color: #fff;
font-size: 20px;
div{
height: 300px;
position: absolute;
}
.left, .right{
width: 300px;
}
.left{
background: blue;
left: 0;
}
.right{
background: green;
right: 0;
}
.center{
background: #f95644;
left: 300px;
right: 300px;
}
}

第三种——flexbox布局

优点：css3新增的布局方式，就是为了解决第一种和第二种布局的不足出现的，推荐使用
缺点：存在兼容问题

// HTML
<div class="block">
<div class="left">左侧宽度300px</div>
<div class="center">
<h1>中间宽度自适应</h1>
</div>
<div class="right">右侧宽度300px</div>
</div>

// less
.block{
color: #fff;
font-size: 20px;
display: flex;
div{
height: 300px;
}
.left, .right{
width: 300px;
}
.left{
background: blue;
}
.right{
background: green;
}
.center{
background: #f95644;
flex: 1;
}
}

第四种——表格布局

优点：兼容性最好，felxbox无法解决的问题可以使用表格布局
缺点：代码繁琐
// HTML
<div class="block">
<div class="left">左侧宽度300px</div>
<div class="center">
<h1>中间宽度自适应</h1>
</div>
<div class="right">右侧宽度300px</div>
</div>

// less
.block{
color: #fff;
font-size: 20px;
display: table; // 设置父元素表格布局
width: 100%;
div{
height: 300px;
display: table-cell; // 使子元素成为表格单元格
}
.left, .right{
width: 300px;
}
.left{
background: blue;
}
.right{
background: green;
}
.center{
background: #f95644;
}
}

第五种——网格布局

优点：新技术

// HTML
<div class="block">
<div class="left">左侧宽度300px</div>
<div class="center">
<h1>中间宽度自适应</h1>
</div>
<div class="right">右侧宽度300px</div>
</div>

// less
.block{
color: #fff;
font-size: 20px;
width: 100%;
display: grid; // 设置网格布局
grid-template-rows: 300px; // 网格行高300px
grid-template-columns: 300px auto 300px; // 网格左300px，中自适应，右300px
.left{
background: blue;
}
.right{
background: green;
}
.center{
background: #f95644;
}
}

其他问题——中间高度不固定，自动

高度不固定的情况下，各种布局都会有变化：

一、浮动布局：超出300px后，两侧会出现文字环绕的问题

二、绝对定位布局：中间区域超出，两侧高度不变

三、flexbox布局：左中右高度相同，左右两侧高度自动撑开

四、表格布局：左中右高度相同，左右两侧高度自动撑开

五、网格布局：中间区域高度无法超出300px

综上所述，在中间区域高度不固定的情况下，flexbox布局和表格布局是最好的

你还有更好的解决方案吗？留言一起探讨吧！