三栏布局
方法一：通过绝对定位实现
例如：
<style>
.left {
width: 300px;
height: 300px;
background-color: red;
position: absolute;
left: 0;
}
.main {
height: 300px;
background-color: green;
position: absolute;
left: 300px;
right: 300px;
}
.right {
width: 300px;
height: 300px;
background-color: blue;
position: absolute;
right: 0;
}
</style>
<body>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</body>
效果图：
中间部分宽度自适应。
方法二：table-cell实现
例如：
<style>
.box {
width: 100%;
display: table;
}
.left {
display: table-cell;
width: 300px;
background-color: red;
}
.right {
display: table-cell;
width: 300px;
background-color: blue;
}
.main {
display: table-cell;
background-color: green;
}
</style>
<body>
<div class="box">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
效果图：
品字布局
每块都有固定宽高的
例如：
<style>
div {
width: 100px;
height: 100px;
}
.box {
background-color: red;
margin: 100px auto 0;
}
.box1 {
background-color: blue;
float: left;
margin-left: 50%;
transform: translate(-100%);
}
.box2 {
background-color: green;
float: left;
transform: translate(-100%);
}
</style>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
</body>
效果图：
圣杯布局
圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
<style>
#main {
/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
padding: 0 200px 0 180px;
height: 100px;
}
#center {
float: left;
width: 100%;
/*左栏上去到第一行*/
height: 100px;
background: blue;
}
#left {
float: left;
width: 180px;
height: 100px;
margin-left: -100%;
background: red;
/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
position: relative;
left: -180px;
}
#right {
float: left;
width: 200px;
height: 100px;
margin-left: -200px;
background: green;
/*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
position: relative;
right: -200px;
}
</style>
<body>
<div class="main">
<div class="center">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
效果图：
双飞翼布局
双飞翼布局，就是两端固定宽高，中间自适应的三栏布局
例如：
<style>
.main {
width: 100%;
height: 100%;
position: relative;
}
.main>div {
height: 400px;
}
.left,.right{
width: 200px;
background-color: red;
position: absolute;
}
.left {
top: 0;
left: 0;
}
.right {
top: 0;
right: 0;
}
.center {
background-color: green;
margin-left: 200px;
margin-right: 200px;
}
</style>
<div class="main">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
效果图:
