如何实现一个左右宽度固定，中间自适应的三栏布局呢
下面就来介绍一下具体的实现方案吧！
- float浮动
.container{
width: 100%;
height: 500px;
}
.left{
width: 200px;
height: 500px;
float: left;
background-color: yellow;
}
.center{
height: 500px;
margin-left: 200px;
background-color: blue;
}
.right{
width: 200px;
height: 500px;
float: right;
margin-top: -500px;
background-color: yellow;
}
- position定位
.container{
width: 100%;
height: 500px;
position: relative;
}
.left{
width: 200px;
height: 500px;
position: absolute;
left: 0;
top: 0;
background-color: yellow;
}
.center{
height: 500px;
position: absolute;
top: 0;
left: 200px;
right: 200px;
background-color: blue;
}
.right{
width: 200px;
height: 500px;
position: absolute;
top: 0;
right: 0;
background-color: yellow;
}
- flex布局
.container{
width: 100%;
height: 500px;
display: flex;
} .left{
height: 500px;
background-color: yellow;
flex: 1;
}
.center{
height: 500px;
background-color: blue;
flex: 2;
}
.right{
height: 500px;
background-color: yellow;
flex: 1;
}
- table布局
.container{
width: 100%;
height: 500px;
display: table;
}
.left{
width: 200px;
height: 500px;
display: table-cell;
background-color: yellow;
}
.center{
height: 500px;
display: table-cell;
background-color: blue;
}
.right{
width: 200px;
height: 500px;
display: table-cell;
background-color: yellow;
}
- 网格布局
.container {
display: grid;
/* 网格每行的宽度与页面宽度相等 */
width: 100%;
/* 网格每行的高度 */
grid-template-rows: 500px;
/* 左侧宽度300px，中间自适应，右侧宽度300px */
grid-template-columns: 300px auto 300px;
}
.left , .right{
background-color: yellow;
}
.center{
background-color: blue;
}
下面再给大家介绍两种布局方案，也是实现三栏布局的解决方法
双飞翼布局和圣杯布局的精髓在于，在写页面结构的时候，一定要将中间自适应部分放在最前面，然后再写左右的结构
1.双飞翼布局
.container{
height: 500px;
background-color: orange;
min-width: 400px;
}
.left{
background-color: yellow;
width: 200px;
height: 500px;
float: left;
margin-left: -100%;
}
.center{
background-color: blue;
width: 100%;
height: 500px;
float: left;
}
.right{
background-color: yellow;
width: 300px;
height: 500px;
float: left;
margin-left: -300px;
}
.center-main{
margin: 0 200px;
}
2.圣杯布局
.container{
height: 500px;
background-color: orange;
min-width: 400px;
padding: 0 300px 0 200px;
}
.left{
background-color: yellow;
width: 200px;
height: 500px;
float: left;
position: relative;
left: -200px;
margin-left: -100%;
}
.center{
background-color: blue;
width: 100%;
height: 500px;
float: left;
}
.right{
background-color: yellow;
float: left;
width: 300px;
height: 500px;
position: relative;
right: -300px;
margin-left: -300px;
}
