目录
三栏布局
一. 两边定宽中间自适应
1.flex布局
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<style>
div{
height: 100px;
}
.container{
display: flex;
}
.center{
flex: 1;
background-color: blue;
}
.left,.right{
width: 100px;
background-color: red;
}
</style>
2.浮动 + margin
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div> <!-- 注意此时center在最后面-->
</div>
<style>
div{
height: 100px;
}
.left{
float: left;
width: 100px;
background-color: red;
}
.center{
margin: 0 100px;
background-color: blue;
}
.right{
float: right;
width: 100px;
background-color: red;
}
</style>
3.浮动 + calc()
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<style>
div {
height: 100px;
}
.left {
float: left;
width: 100px;
background-color: red;
}
.center {
float: left;
width: calc(100% - 200px);
background-color: blue;
}
.right {
float: right;
width: 100px;
background-color: red;
}
</style>
4.定位
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<style>
div {
height: 100px;
}
.container {
position: relative;
}
.left {
position: absolute;
left: 0;
width: 100px;
background-color: red;
}
.center {
position: absolute;
left: 100px;
width: calc(100% - 200px);
background-color: blue;
}
.right {
position: absolute;
right: 0;
width: 100px;
background-color: red;
}
</style>
5.表格布局
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<style>
div{
height: 100px;
}
.container {
display: table;
width: 100%;
}
.container>div {
display: table-cell;
}
.center{
background-color: blue;
}
.left,.right{
width: 100px;
background-color: red;
}
</style>
6.网格布局
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<style>
div{
height: 100px;
}
.container {
display: grid;
width: 100%;
grid-template-columns: 100px auto 100px;
}
.left,.right{
background-color: red;
}
.center{
background-color: blue;
}
</style>
7.圣杯布局
<div class="header">头部</div>
<div class="container clearfix">
<div class="center">主区域(优先加载)</div>
<div class="left">左区域</div>
<div class="right">右区域</div>
</div>
<div class="footer">底部</div>
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
}
div{
height: 100px;
}
.header,.footer{
background-color: yellow;
}
.container{
padding: 0 100px;
}
.center,.left,.right{
float: left;
}
.center{
width: 100%;
background-color: red;
}
.left{
position: relative;
left: -100px;
margin-left: -100%;
width: 100px;
background-color: blue;
}
.right{
position: relative;
right: -100px;
margin-left: -100px;
width: 100px;
background-color: green;
}
</style>
8.双飞翼布局
<div class="header">头部</div>
<div class="container clearfix">
<div class="wrapper">
<div class="center">主区域(优先加载)</div>
</div>
<div class="left">左区域</div>
<div class="right">右区域</div>
</div>
<div class="footer">底部</div>
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
div {
height: 100px;
}
.header,
.footer {
background-color: yellow;
}
.wrapper{
width: 100%;
float: left;
}
.center {
margin: 0 100px;
background-color: red;
}
.left {
width: 100px;
float: left;
margin-left: -100%;
background-color: blue;
}
.right {
width: 100px;
float: left;
margin-left: -100px;
background-color: green;
}
</style>
二. 中间定宽两边自适应
1.flex布局
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<style>
div{
height: 100px;
}
.container{
display: flex;
}
.left,right{
flex: 1;
background-color: red;
}
.center{
width: 1250px;
height: 500px;
background-color: yellow;
}
</style>
2.浮动布局
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<style>
div{
height:100px
}
.center{
float: left;
width: 1250px;
background-color: blue;
}
.left,.right{
float: left;
width: calc(50% - 625px);
background-color: red;
}
</style>
3.margin负值
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<style>
div{
height: 100px;
}
.center {
width: 1000px;
float: left;
background-color: yellow;
}
.left {
float: left;
width: 50%;
margin-left: -500px;
background-color: red;
}
.right {
float: right;
width: 50%;
margin-right: -500px;
background-color: blue;
}
</style>
4.display:-webkit-box;
<div class="container ">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<style>
div{
height:100px
}
.container{
display: -webkit-box;
}
.left,.right{
-webkit-box-flex: 1;
background-color: blue;
}
.center{
width: 1250px;
background-color: red;
}
</style>