页面布局之圣杯布局的实现

圣杯布局解决方案

1. 浮动解决：

<style>
.left {
float: left;
width: 300px;
}
.right{
float: right;
width: 300px;
}
.center {
background: red;
}
</style>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

优点：兼容性好
缺点：脱离文档流，需清除浮动

2. 绝对定位解决方案

.container {
	position: absolute;
}
.left {
	left: 0;
	width: 300px;
}
.right{
	right: 0;
	width: 300px;
}
.center {
	left: 300px;
	right: 300px;
	background: red;
}
<div class="container">
	<div class="left"></div>
	<div class="right"></div>
	<div class="center"></div>
</div>

优点：快捷
缺点：脱离文档流，可使用性较差

3. flex布局

.container {
	display: flex;
}
.left {
	width: 300px;
}
.right{
	width: 300px;
}
.center {
	flex:1;
	background: red;
}
<div class="container">
	<div class="left"></div>
	<div class="right"></div>
	<div class="center"></div>
</div>

优点：解决了前两种所存在的问题，在移动端使用较多,在高度不确定的情况可正常使用
缺点：兼容问题

4. table布局

.container {
	display: table;
	width: 100%;
	height: 100px;
}
.container>div {
	display: table-cell;
}
.left {
	display: table-cell;
	width: 300px;
}
.right{
	display: table-cell;
	width: 300px;
}
.center {
	display: table-cell;
	background: red;
}
<div class="container">
	<div class="left"></div>
	<div class="right"></div>
	<div class="center"></div>
</div>

优点： 兼容性较好，在高度不确定的情况可正常使用
缺点：较为复杂，其中一块高度变化，另外两块也会随着其高度改变
5. grid布局

.container {
	display: grid;
	width: 100%;
	grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
}
.center {
	background: red;
}
<div class="container">
	<div class="left"></div>
	<div class="right"></div>
	<div class="center"></div>
</div>

优点：代码量很少，从CSS层面提出了可替代使用栅格化布局的方案
缺点：目前兼容性较差