三列自适应布局
左右两侧固定宽度,中间盒子自适应
技术点: 负外边距 margin-left:-px + 相对定位 (left-,right-)+ 浮动并排
圣杯布局
原理
特征: 如何把中心内容移动到中心显示?
设置最外侧盒子的内边距吧实现的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
/* min-height: 最小高度 if 内容的高度<300px 取300px */
min-height: 500px;
/* 4:内边距 ---> 把内容挤到中间来 */
padding: 0px 220px 0px 200px;
}
.left {
width: 200px;
height: 400px;
background-color: red;
float: left;
/* 2:向左走100% */
margin-left: -100%;
/* 5:利用相对定位想左移动自身的宽度 */
position: relative;
left:-200px;
}
.center {
width: 100%;
height: 400px;
background-color: deeppink;
float: left;
}
.right {
width: 220px;
height: 400px;
background-color: palegreen;
float: left;
/* 3: */
margin-left: -220px;
/* 6:利用相对定位想右移动自身的宽度 */
position: relative;
right: -220px;
}
</style>
</head>
<body>
<div class="container">
<!-- 100%宽度 自适应 保证左右两侧的盒子同时和他并排右侧 -->
<div class="center">中心盒子</div>
<!-- 固定宽度 -->
<div class="left">左侧盒子</div>
<div class="right">右侧盒子</div>
</div>
</body>
</html>