前端面试题HTML+CSS基础篇——三栏布局

如何实现一个左右宽度固定，中间自适应的三栏布局呢

下面就来介绍一下具体的实现方案吧！

1. float浮动

<div class="container">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>

.container{
	width: 100%;
	height: 500px;
}
.left{
	width: 200px;
	height: 500px;
	float: left;
	background-color: yellow;
}
.center{
	height: 500px;
	/* float: left; */
	margin-left: 200px;
	background-color: blue;
}
.right{
	width: 200px;
	height: 500px;
	float: right;
	margin-top: -500px;
	background-color: yellow;
}

2. position定位

<div class="container">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>

.container{
	width: 100%;
	height: 500px;
	position: relative;
}
.left{
	width: 200px;
	height: 500px;
	position: absolute;
	left: 0;
	top: 0;
	background-color: yellow;
}
.center{
	height: 500px;
	position: absolute;
	top: 0;
	left: 200px;
	right: 200px;
	background-color: blue;
}
.right{
	width: 200px;
	height: 500px;
	position: absolute;
	top: 0;
	right: 0;
	background-color: yellow;
}

3. flex布局

<div class="container">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>

.container{
	width: 100%;
	height: 500px;
	display: flex;
}
.left{
	height: 500px;
	background-color: yellow;
	flex: 1;
}
.center{
	height: 500px;
	background-color: blue;
	flex: 2;
}
.right{
	height: 500px;
	background-color: yellow;
	flex: 1;
}

4. table布局

<div class="container">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>

.container{
	width: 100%;
	height: 500px;
	display: table;
}
.left{
	width: 200px;
	height: 500px;
	display: table-cell;
	background-color: yellow;
}
.center{
	height: 500px;
	display: table-cell;
	background-color: blue;
}
.right{
	width: 200px;
	height: 500px;
	display: table-cell;
	background-color: yellow;
}

5. 网格布局

<div class="container">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>

.container {
	display: grid;
	/* 网格每行的宽度与页面宽度相等 */
	width: 100%;
	/* 网格每行的高度 */
	grid-template-rows: 500px;
	/* 左侧宽度300px，中间自适应，右侧宽度300px */
	grid-template-columns: 300px auto 300px;
}
.left , .right{
	background-color: yellow;
}
.center{
	background-color: blue;
}

下面再给大家介绍两种布局方案，也是实现三栏布局的解决方法

双飞翼布局和圣杯布局的精髓在于，在写页面结构的时候，一定要将中间自适应部分放在最前面，然后再写左右的结构

1.双飞翼布局

<div class="container">
	<div class="center">
		<div class="center-main"></div>
	</div>
	<div class="left"></div>
	<div class="right"></div>
</div>

.container{
	height: 500px;
	background-color: orange;
	min-width: 400px;
}
.left{
	background-color: yellow;
	width: 200px;
	height: 500px;
	float: left;
	margin-left: -100%;
}
.center{
	background-color: blue;
	width: 100%;
	height: 500px;
	float: left;
}
.right{
	background-color: yellow;
	width: 300px;
	height: 500px;
	float: left;
	margin-left: -300px;
}
.center-main{
	margin: 0 200px;
}

2.圣杯布局

<div class="container">
	<div class="center"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>

.container{
	height: 500px;
	background-color: orange;
	min-width: 400px;
	padding: 0 300px 0 200px;
}
.left{
	background-color: yellow;
	width: 200px;
	height: 500px;
	float: left;
	position: relative;
	left: -200px;
	margin-left: -100%;
}
.center{
	background-color: blue;
	width: 100%;
	height: 500px;
	float: left;
}
.right{
	background-color: yellow;
	float: left;
	width: 300px;
	height: 500px;
	position: relative;
	right: -300px;
	margin-left: -300px;
}