css完成3栏布局的3种方式（附代码）

[摘要]这篇文章给大家介绍的内容是关于css实现三栏布局的三种方式（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。浮动布局分为三个div，另外一个父级包含这三个div，使用floa...

这篇文章给大家介绍的内容是关于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：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实现三栏布局的三种方式（附代码）的详细内容，更多请关注php中文网其它相关文章！				
				
					微信
					分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  关键词：css完成3栏布局的3种方式（附代码）