单、双、三列布局

本文最后更新于:2020年4月7日 下午

一、单列水平居中布局

1
2
3
4
5
6
div{
margin: 0 auto;
height: 300px;
width: 500px;
background-color: #66ccff;
}

二、双列布局

(1)自适应(比较少用), 把宽度改成实际的像素值即可固定宽度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body{
margin: 0; /*清除默认样式*/
padding: 0;
}
.wrapper{
width: 800px;
margin: 0 auto;
}
.left{
width: 20%; /*要固定宽度的话,可以采用具体的像素值,如200px*/
height: 500px;
float: left;
background-color: #66ccff;
}
.right{
width: 80%;
height: 500px;
float: right;
background-color: gray;
}

三、三列布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.body{
margin: 0; /*清除浏览器默认样式*/
padding: 0;
}
.left{
width: 200px;
height: 500px;
background-color: red;

position: absolute;
left: 0;
top: 0;
}
.middle{
height: 500px;
background-color: lightblue;
margin: 0 310px 0 210px;
}
.right{
width: 300px;
height: 500px;
background-color: gray;

position: absolute;
right: 0;
top: 0;
}

更多三列布局

而利用前面的单列,双列和三列布局,我们可以搭配出混合布局,如在单列布局的div中,再放入单列布局的div和三列布局div。(这就是套娃吧)


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!