1、圣杯布局
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局</title>
<meta charset="utf-8">
<style type="text/css">
/*圣杯布局*/
.container{
/*为左右盒子留出位置*/
padding: 0 300px 0 200px;
}
.left,.middle,.right{
min-height: 130px;
float: left;
position: relative;
}
.left{
background: green;
width: 200px;
/*负边距让左右盒子移到和中间盒子同行，-100%表示左移一行的大小*/
margin-left: -100%;
/*负值实现反方向移动，即向左移动填充padding-left*/
left: -200px;
}
.middle{
background-color: blue;
/*单独占满一行*/
width: 100%;
height: 1600px;
}
.right{
background-color: red;
width: 300px;
/*负边距让左右盒子移到和中间盒子同行*/
margin-left: -300px;
/*负值实现反方向移动，即向右移动填充padding-right*/
right: -300px;
}
</style>
</head>
<body>
<!-- 圣杯布局 -->
<div class="container">
<!-- 中间的div必须写在最前面,优先加载 -->
<div class="middle">中间弹性区</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</div>
</body>
</html>
2、双飞翼布局
<!DOCTYPE html>
<html>
<head>
<title>双飞翼布局</title>
<meta charset="utf-8">
<style type="text/css">
.left,.middle,.right{
min-height: 130px;
float: left;
}
.left{
background-color: red;
width: 200px;
margin-left: -100%;
}
.middle{
background-color: gray;
width: 100%;
}
.right{
background-color: darkblue;
width: 300px;
margin-left: -300px;
}
.content{
margin: 0 300px 0 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="middle">
<div class="content">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
3、flex布局
<!DOCTYPE html>
<html>
<head>
<title>flex实现三栏布局</title>
<meta charset="utf-8">
<style type="text/css">
.container{
min-height: 130px;
display: flex;
}
.middle{
background-color: rgba(0,0,255,0.7);
/*flex-grow 默认为0 放大比例，填充空白，*/
flex-grow:1;
}
.left{
background-color: rgba(0,255,0,0.7);
/*order默认为0，越小越靠前*/
order: -1;
/*项目占据主轴的空间*/
flex-basis: 200px;
}
.right{
background-color: rgba(255,0,0,0.7);
/*项目占据主轴的空间*/
flex-basis: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
4、绝对定位
<!DOCTYPE html>
<html>
<head>
<title>绝对定位实现三栏布局</title>
<meta charset="utf-8">
<style type="text/css">
.container{
position: relative;
}
.middle,.left,.right{
top: 0;
height: 130px;
}
.middle{
background-color: red;
height: 500px;
margin: 0 300px 0 200px;
}
.left{
background-color: blue;
width: 200px;
position: absolute;
left: 0;
}
.right{
background-color: green;
width: 300px;
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<!-- 中间的div必须写在最前面,优先加载 -->
<div class="middle">中间弹性区</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</div>
</body>
</html>