# 圣杯布局
此布局一般的需求为两边等宽，中间自适应的三栏布局。
Nam aliquam sem et tortor. Neque interdum consectetur libero id.
left
right
<style>
.main-lay {
width: 100%;
padding: 39px 29px;
font-size: 12px;
box-sizing: border-box;
}
.section-row {
padding: 0 129px;
box-shadow: 0 0 0 1px #eee;
box-sizing: border-box;
}
.section-row::after {
content: '';
display: block;
clear: both;
}
.section-row > .div {
height: 229px;
line-height: 1.5em;
padding: 29px 12px;
text-align: center;
float: left;
color: white;
background: #b4a078;
box-sizing: border-box;
}
.section-row .left, .section-row .right {
position: relative;
width: 119px;
}
.section-row .left {
left: -129px;
margin-left: -100%;
}
.section-row .center {
width: 100%;
text-align: justify;
hyphens: auto;
}
.section-row .right {
left: 129px;
margin-left: -119px;
}
/* input range */
input[type="range"] {
width: 100%;
cursor: ew-resize;
}
</style>
<template>
<div class="main-lay">
<input ref="range" type="range" value="100">
<div class="section-row" :style="{ width }">
<div class="div center">Nam aliquam sem et tortor. Neque interdum consectetur libero id.</div>
<div class="div left">left</div>
<div class="div right">right</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
width: "100%"
}
},
mounted() {
this.$refs.range.oninput = ({ target: { value } }) => {
this.width = `${60 + value * .4}%`;
}
}
}
</script>
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
显示代码 复制代码 复制代码