这篇文章给大家介绍的内容是关于css实现三栏布局的三种方式（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
浮动布局
分为三个div，另外一个父级包含这三个div，使用float，
注意点：三个div，left --> right ---> center 这种顺序
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style type="text/css"> body { 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; } </style> </head> <body> <div class="father"> <div class="left">1</div> <div class="right">2</div> <div class="center">3</div> </div> </body> </html>
flex
设置中间盒子flex：1，这样的话就可以实现自适应，默认水平排列
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>title</title><style type="text/css">.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;}</style></head><body><div class="father"><div class="left"></div><div class="center"></div><div class="right"></div></div> </body></html>
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;
绝对定位对齐
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>title</title><style type="text/css">.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;}</style></head><body><div class="father"><div class="one">1</div><div class="two">1</div><div class="three">1</div></div> </body></html>
相关文章推荐：
设计前端网页页面时,怎么使导航栏居中对齐?（代码实测）
css布局有哪些？css常见的布局方式（附代码）
以上就是css实现三栏布局的三种方式（附代码）的详细内容。