【手把手带你拿下三列布局🌟】

流体布局

随着浏览器的放大或缩小，布局自适应。 两边宽度固定，中间自适应。浮动+外边距方案

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

.left{
	float: left;
	width: 100px;
	height: 200px;
	background: red;
}
.right{
	float: right;
	width: 100px;
	height: 200px;
	background: blue;
}
.main{
	margin-left: 120px;
	margin-right: 120px; /* 这两行和最后一行保留一个 */
	height: 200px;
	background: pink;
	/* margin: 0 auto; */
	}/* 这一行可以有} 流体布局 */

圣杯布局:

左右宽度固定 中间自适应
1.容器设置为flex弹性布局，中间flex设置为1

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

.container {
	height: 200px;
	display: flex;
	background: yellow; 
}
.main{
	flex: 1;
	background: pink; 
	height:100%;
}
.left{
	width: 200px;
	height:200px;
	background: blue; 
	
}
.right{
	width: 200px;
	height:200px;
	background: green; 
	}

2.相对定位+浮动+负边距

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

.container{
	padding-left: 100px;
	padding-right: 100px;
}
.left{
	width: 100px;
	height: 200px;
	background: skyblue;
	margin-left: -100%;
	position: relative;
	right: 100px;
	float: left;
}
.main{
	width: 100%;
	height: 200px;
	background: pink;
	float: left;
	
}
.right{
	width: 100px;
	height: 200px;
	background: gold;
	margin-left: -100px;
	position: relative;
	left: 100px;
	float: left;
}

双飞翼布局

和圣杯布局的区别就是中间内容包裹了center 没有使用相对定位 直接负边距就可以搞定

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

#container{
	width: 100%;
}
.column{float: left;}
#center{
	margin-left: 100px;
	margin-right: 100px;
	height: 100px;
	background: pink;
}
#left{
	width: 100px;
	height: 100px;
	background: skyblue;
	margin-left: -100%;
	
}
#right{
	width: 100px;
	height: 100px;
	background: seagreen;
	margin-left: -100px;
	
}