html三栏布局完整源码,css实现三栏布局的三种方式（附代码）

这篇文章给大家介绍的内容是关于css实现三栏布局的三种方式(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

浮动布局

分为三个div，另外一个父级包含这三个div，使用float，

注意点：三个div，left --> right ---> center 这种顺序

Title

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;

}

1

2

3

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;

}

1

1

1

相关文章推荐：