浮动布局
分为三个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实现三栏布局的三种方式（附代码）的详细内容，更多请关注php中文网其它相关文章！
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
