技術標籤：htmlcsshtml5

固比固佈局、聖盃佈局、雙飛翼佈局。這三種佈局都是為了做到頁面左右兩側固定，中間部分隨視窗大小改變而改變。

固比固佈局：

使用彈性盒子的方式

html:

<div id="box">
	<div class="cl1">1</div>
	<div class="cl2">2</div>
	<div class="cl3">3</div>
</div>

css:

#box{
	width
 
: 100%;
	/* 彈性盒子 */
	display: flex;
	justify-content: center;
	align-items: center;
}
.cl1{
	background-color: #00FFFF;
	/* 固定寬度 */
	width: 200px;
	height: 300px;
}
.cl2{
	background-color: #10C593;
	/* 居中佔比 */
	flex: 1;
	height: 300px;
}
.cl3{
	background-color: #1D7DB1;
	/* 固定寬度 */
	width: 200px;
	height: 300px;
}

聖盃佈局：

給父盒子新增margin，給左右盒子新增浮動

html:

<div id="box">
	<div class="left">左</div>
	<div class="center">中</div>
	<div class="right">右</div>
</div>

css:

#box{
	height: 150px;
	background-color: #CF9B2B;
	margin: 0px 300px;
}
.center
 
{
	width: 100%;
	height: 150px;
	background-color: #CE8483;
	float: left;
}
.left{
	float: left;
	width: 300px;
	height: 150px;
	background-color: #00FFFF;
	margin-left: -300px;
	position: relative;
}
.right{
	float: right;
	width: 300px;
	height: 150px;
	background-color: #10C593;
	margin-right: -300px;
	position: relative;
}

雙飛翼佈局：

html：

<div id="box">
	<div class="center">
		<div class="inner"></div>
	</div>
	<div class="left"></div>
	<div class="right"></div>
</div>

css：

#box {
	height: 150px;
}

.center {
	width: 100%;
	height: 150px;
	background-color: #00FFFF;
	float: left;
}

.left {
	width: 200px;
	height: 140px;
	background-color: #10C593;
	float: left;
	margin-left: -100%;
}

.right {
	width: 300px;
	height: 140px;
	background-color: #2E64FE;
	float: left;
	margin-left: -300px;
}

.inner{
	height: 150px;
	background-color: pink;
	margin-left: 200px;
	margin-right: 300px;
}