三栏布局的几种方法
akong 2018-12-14 13:24:17 三栏布局
总结一下三栏布局的几种发方法。
# 左右定宽 中间自适
今天来总结一下三栏布局的相关知识点。
题目:如果高度已知,当前有一个三栏布局,左右各300px,中间自适应,如何实现
# 浮动
<section class="layout float">
<style>
.layout.float .left {
float: left;
width: 300px;
background: lightblue
}
.layout.float .right {
float: right;
width: 300px;
background: lightcoral
}
.layout.float .center {
background: lightgreen
}
</style>
<h1>float布局</h1>
<article class="l-r-c">
<div class="left"></div>
<div class="right"></div>
<div class="center">float布局</div>
</article>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
关键点
这里要注意三个块的位置 左 右 中 不能错,因为要保证两个左右先实现浮动
# 绝对定位
<section class="layout absoult">
<style>
.layout.absoult .l-r-c>div {
position: absolute;
}
.layout.absoult .l-r-c .left {
background: lightblue;
left: 0;
width: 300px;
}
.layout.absoult .l-r-c .right {
background: lightcoral;
right: 0;
width: 300px;
}
.layout.absoult .l-r-c .center {
background: lightgreen;
left: 300px;
right: 300px;
}
</style>
<h1>absoult布局</h1>
<article class="l-r-c">
<div class="left"></div>
<div class="center">absoult布局</div>
<div class="right"></div>
</article>
</section>
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
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
关键点
中间的div设置左300 和右300即可居中自适
# flex
<section class="layout flex">
<style>
.layout.flex {
margin-top: 110px;
}
.layout.flex .l-r-c {
display: flex
}
.layout.flex .l-r-c .left {
width: 300px;
background: lightblue;
}
.layout.flex .l-r-c .right {
width: 300px;
background: lightcoral;
}
.layout.flex .l-r-c .center {
flex: 1;
background: lightgreen;
}
</style>
<h1>flex布局</h1>
<article class="l-r-c">
<div class="left"></div>
<div class="center">flex布局</div>
<div class="right"></div>
</article>
</section>
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
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
关键点
中间div 的flex属性设置为1
# 表格布局
<section class="layout table">
<style>
.layout.table .l-r-c {
height: 100px;
width: 100%;
display: table;
}
.layout.table .l-r-c>div{
display: table-cell;
}
.layout.table .l-r-c .left {
width: 300px;
background: lightblue
}
.layout.table .l-r-c .right {
width: 300px;
background: lightcoral;
}
.layout.table .l-r-c .center {
background: lightgreen;
}
</style>
<h1>table表格布局</h1>
<article class="l-r-c">
<div class="left"></div>
<div class="center">table表格布局</div>
<div class="right"></div>
</article>
</section>
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
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
关键点
article
的宽度设置为100%,display为table,子div display属性设置为table-cell
# gird网格布局
<section class="layout grid">
<style>
.layout.grid .l-r-c {
display: grid;
width: 100%;
grid-template-columns: 300px auto 300px;
grid-template-rows: 100px;
}
.layout.grid .l-r-c .left {
background: lightblue;
}
.layout.grid .l-r-c .right {
background: lightcoral;
}
.layout.grid .l-r-c .center {
background: lightgreen;
}
</style>
<h1>grid网格布局</h1>
<article class="l-r-c">
<div class="left"></div>
<div class="center">grid网格布局</div>
<div class="right"></div>
</article>
</section>
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
关键点
设置父元素的displaygrid 并设置一下两个属性,以下两个属性不要搞混: grid-template-columns 设置 几个值就是几列,每一个值分别为每一列的宽 度 grid-template-rows 设置几个值就是就是几行,每一个值分别为每一行的高度
# 优缺点
浮动方案: 兼容性好 但是要解决浮动问题,清楚浮动关于到BFC的内容,后面有空再总结
**绝对定位方案:**方便快捷 可使用性强,但是对页面布局的破坏较大
**flex布局:**很优雅的解决方案,基本上没什么缺陷
表格布局: 兼容性好 各列之间可以同时增高,但是布局太过繁琐,被人抛弃,但是有些地方例如多栏布局会有奇效。
gird布局 方便快捷,但是受兼容性问题和普及性问题
如果要求中见高度的变换的情况下,左右能够跟着拉伸高度,flex布局和网格布局可以实现