css三栏、两栏自适应

发表于 | 分类于

三栏自适应布局,左右两侧300px,中间宽度自适应

float (左右浮动,中间不用给宽,设置margin左右留出位置)

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
.wrapper {
    height: 100px;
}
.left {
    float: left;
    width: 300px;
    height: 100%;
    background: red;
}
.right {
    float: right;
    width: 300px;
    height: 100%;
    background: yellow;
}
.content {
    background: skyblue;
    height: 100%;
    margin: 0 300px;
}
//html部分,center放到后面
<div class="wrapper">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="content">content</div>
</div>

position定位 (中间设置left 300 right 300 ,宽度就自适应了)

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
28
29
30
31
.wrapper {
    position: relative;
    height: 100px;
}
.left {
    position: absolute;
    left: 0;
    width: 300px;
    height: 100%;
    background: red;
}
.right {
    position: absolute;
    right: 0;
    width: 300px;
    height: 100%;
    background: yellow;
}
.content {
    position: absolute;
    left: 300px;
    right: 300px;
    background: skyblue;
    height: 100%;
}
//html部分,center放到后面
<div class="wrapper">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="content">content</div>
</div>

flex伸缩布局

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
28
29
30
31
32
.wrapper {
    position: relative;
    height: 100px;
}
.left {
    position: absolute;
    left: 0;
    width: 300px;
    height: 100%;
    background: red;
}
.right {
    position: absolute;
    right: 0;
    width: 300px;
    height: 100%;
    background: yellow;
}
.content {
    position: absolute;
    left: 300px;
    right: 300px;
    background: skyblue;
    height: 100%;
}

//html部分,center放到后面
<div class="wrapper">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="content">content</div>
</div>

表格布局 (设置父元素为display:table,子元素都是display:table-cell;然后给两边设置width,中间不设置就自动了,记得父元素给width:100%)

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
28
29
30
.wrapper {
    display: table;
    width: 100%;
    height: 100px;
}
.left {
    display: table-cell;
    width: 300px;
    height: 100%;
    background: red;
}
.right {
    display: table-cell;
    width: 300px;
    height: 100%;
    background: yellow;
}
.content {
    display: table-cell;
    background: skyblue;
    height: 100%;
}

//html部分,center改放中间
<div class="wrapper">
    <div class="left">left</div>
    <div class="content">content</div>
    <div class="right">right</div>
   
</div>

网格布局 Grid第一个专门为解决布局问题而创建的CSS模块 (设置容器类型,然后设置列宽和行高)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.wrapper {
    display: grid;
    width: 100%;
    grid-template-rows: 200px 100px 10px;
    grid-template-columns: 300px auto 300px;
}
.left {
    background: red;
}
.right {
    background: yellow;
}
.content {
    background: skyblue;
}

//html部分,center改放中间
<div class="wrapper">
    <div class="left">left</div>
    <div class="content">content</div>
    <div class="right">right</div>
   
</div>

float 父元素记得要清理浮动

三栏自适应布局,上下固定,中间高度自适应 (自适应的地方设置top300 bottom300,高度就自适应了)

position定位

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
28
29
30
31
32
.wrapper {
    height: 800px;
    position: relative;
}
.top {
    position: absolute;
    top: 0;
    height: 100px;
    width: 100%;
    background: red;
}
.bottom {
    position: absolute;
    bottom: 0 ;
    height: 100px;
    width: 100%;
    background: blue;
}
.content {
    position: absolute;
    top: 100px;
    bottom: 100px;
    width: 100%;
    background: skyblue;
}


<div class="wrapper">
    <div class="top">left</div>
    <div class="content">content</div>
    <div class="bottom">right</div>
</div>

flex布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.wrapper {
    display: flex;
    height: 700px;
    flex-direction: column;
}
.top {
    height: 100px;
    background: red;
}
.bottom {
    height: 100px;
    background: blue;
}
.content {
    flex: 1;
    background: skyblue;
}

<div class="wrapper">
    <div class="top">left</div>
    <div class="content">content</div>
    <div class="bottom">right</div>
</div>

网格布局grid (设置grid-template-rows: 300px auto 300px)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.wrapper {
    display: grid;
    height: 700px;
    grid-template-rows: 100px auto 100px;
}
.top {
    background: red;
}
.bottom {
    background: blue;
}
.content {
    background: skyblue;
}

<div class="wrapper">
    <div class="top">left</div>
    <div class="content">content</div>
    <div class="bottom">right</div>
</div>

两栏自适应,右侧固定,左侧自适应

利用BFC的渲染规则,BFC不会和浮动的元素互相重叠

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//css 避免左侧侵入到右侧,给左侧div创建一个BFC,因为BFC的渲染机制就是独立的容器,不会和浮动的元素重叠
.left {
    height: 200px;
    background: red;
    overflow: hidden;
}
.right {
    float: right;
    width: 300px;
    background: blue;
}

<div class="wrapper">
    <div class="right">right</div>
    <div class="left">left</div>
</div>

定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.wrapper {
    position: relative;
}
.left {
    position: absolute;
    left: 0;
    right: 300px;
    background: red;
}
.right {
    position: absolute;
    width: 300px;
    right: 0;
    background: blue;
}


<div class="wrapper">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.wrapper {
    display: flex;
}
.left {
    flex: 1;
    background: red;
}
.right {
    width: 300px;
    background: blue;
}


<div class="wrapper">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

表格布局,注意给父元素表格要设置width:100%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.wrapper {
    display: table;
    width: 100%;
}
.left {
    display: table-cell;
    background: red;
}
.right {
    display: table-cell;
    width: 300px;
    background: blue;
}



<div class="wrapper">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

grid网格布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrapper {
    display: grid;
    grid-template-columns: auto 300px;
}
.left {
    background: red;
}
.right {
    background: blue;
}

<div class="wrapper">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

两栏自适应,上侧固定,下侧自适应

设置content部分的top: 100px botton: 0

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
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.top {
    position: absolute;
    top: 0;
    height: 100px;
    background: red;
    width: 100%;

}
.content {
    position: absolute;
    width: 100%;
    top: 100px;
    bottom: 0;
    background: skyblue;
}


<div class="wrapper">
    <div class="top">top</div>
    <div class="content">content</div>
</div>

flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.wrapper {
    display: flex;
    height: 800px;
}
.top {
    height: 100px;
    background: red;

}
.content {
    flex: 1;
    background: skyblue;
}



<div class="wrapper">
    <div class="top">top</div>
    <div class="content">content</div>
</div>

grid网格布局

设置display:grid后 设置列宽或者行高,有多少列就设置多少个参数,多少行就设多少参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.wrapper {
    display: grid;
    height: 800px;
    grid-template-rows: 100px auto;
}
.top {
    background: red;
}
.content {
    background: skyblue;
}


<div class="wrapper">
    <div class="top">top</div>
    <div class="content">content</div>
</div>

圣杯布局

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

.container{
    margin:0 auto;
    width:900px;
    height:300px;
    background-color:orange;
    padding:0 200px;
}
.center, .left, .right {
    float: left;
}

.left{
    background: pink;
    width: 300px;
    height: 300px;
    margin-left: -100%;
    }
    
.right{
    background: pink;
    width: 300px;
    height: 300px;
    margin-left: -300px;  //300px为右盒子的宽度
}

.left{
    position: relative;
    left: -300px;
}

.right{
    position: relative;
    right: -300px;
}

.container{
    border: 1px solid black;
    height: 300px;
    padding: 0 400px;
}

<div class='container'>
    <div class="center">中间的</div>
    <div class="left">左边的</div>
    <div class="right">右边的</div>
</div>

双飞翼布局

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
28
29
30
31
32
33
34
35
36
37
38
.container{
    margin:0 auto;
    width:900px;
    height:300px;
    background-color:orange;
}
.left{
    width:200px;
    height:300px;
    background-color:red;
    float:left;
    margin-left:-100%;
}

.right{
    width:200px;
    height:300px;
    background-color:blue;
    float:left;
    margin-left:-200px;
}
.middle{
    width:100%;
    height:300px;
    background-color:pink;
    float:left;
}
.inner_middle{
    margin:0 200px;
}

<div class='container'>
    <div class="middle">
        <div class="inner_middle">中间的</div>
    </div>
    <div class="left">左边的</div>
    <div class="right">右边的</div>
</div>
Buy me a cup of coffee,thanks!