这篇文章给大家介绍的内容是关于css实现三栏布局的三种方式(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
浮动布局
分为三个div，另外一个父级包含这三个div，使用float，
注意点：三个div，left --> right ---> center 这种顺序
Titlebody {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 300px;
height: 100px;
background-color: red;
}
.right {
float: right;
width: 300px;
height: 100px;
background-color: blue;
}
.center {
margin: 0px 300px 0px 300px;
background-color: black;
height: 100px;
}
Flex
设置中间盒子FLex：1，这样的话就可以实现自适应，默认水平排列
Title.father {
display: flex;
}
.left {
width: 300px;
height: 100px;
background-color: red;
}
.center {
flex:1;
height: 100px;
background-color: black;
}
.right {
width: 300px;
height: 100px;
background-color: blue;
}
flex相关知识点，一般会使用到的
1、设置display：flex
2、容器图：
轴：水平main axis和垂直cross axis
3、容器的属性
flex-direction：主轴的方向，row | row-reverse | column | column-reverse;
flex-wrap：换行， nowrap | wrap | wrap-reverse;
flex-flow：flex-direction和flex-wrap简写
justify-content：主轴上的对齐方式， flex-start | flex-end | center | space-between | space-around；
align-items：交叉轴上如何对齐，flex-start | flex-end | center | baseline | stretch;
绝对定位对齐
Title.one {
background-color: red;
position: absolute;
left: 0;
width: 300px;
height: 100px;
}
.two {
left: 300px;
right: 300px;
background-color: blue;
position: absolute;
height: 100px;
}
.three {
right: 0px;
width: 300px;
background-color: yellow;
position: absolute;
height: 100px;
}
相关文章推荐：