(1)1列固定宽度
1 <template> 2 <div> 3 <div class="layout">1列固定宽度</div>
![](https://images2018.cnblogs.com/blog/1425888/201806/1425888-20180628215242008-1824498853.png)
4 </div> 5 </template> 6 7 <script> 8 export default { 9 name: 'Home' 10 } 11 </script> 12 13 <style scoped> 14 .layout{ 15 background: red; 16 border: 20px solid #333; 17 width: 300px; 18 height: 300px; 19 } 20 </style>
故总宽度为 = 300px + 20px;
(2)1列宽度自适应
1 <template> 2 <div> 3 <div class="layout">1列固定宽度</div>
![](https://images2018.cnblogs.com/blog/1425888/201806/1425888-20180628215540188-1481316484.png)
4 </div> 5 </template> 6 7 <script> 8 export default { 9 name: 'Home' 10 } 11 </script> 12 13 <style scoped> 14 .layout{ 15 background: blue; 16 border: 20px solid #333; 17 width: 80%; 18 height: 300px; 19 } 20 </style>
采用百分比进行宽度自适应,总宽度为=80%窗口大小 + 20px;
(3)1列固定宽度居中
1 <template> 2 <div> 3 <div class="layout">1列固定宽度</div>
![](https://images2018.cnblogs.com/blog/1425888/201806/1425888-20180628220032002-1843250749.png)
4 </div> 5 </template> 6 7 <script> 8 export default { 9 name: 'Home' 10 } 11 </script> 12 13 <style scoped> 14 .layout{ 15 background: blue; 16 border: 20px solid #333; 17 width: 300px; 18 height: 300px; 19 margin: 0px auto; 20 } 21 </style>
(4)2列固定宽度
1 <template> 2 <div> 3 <div class="left">左列</div> 4 <div class="right">右列</div>
![](https://images2018.cnblogs.com/blog/1425888/201806/1425888-20180628221011034-1709799785.png)
5 </div> 6 </template> 7 8 <script> 9 export default { 10 name: 'Home' 11 } 12 </script> 13 14 <style scoped> 15 .left{ 16 background: blue; 17 border: 20px solid #333; 18 width: 300px; 19 height: 300px; 20 float: left; 21 } 22 .right{ 23 background: red; 24 border: 20px solid #333; 25 width: 300px; 26 height: 300px; 27 float: left; 28 } 29 </style>
border没有重叠,故中间黑色部分宽度为=20px + 20px;
(5) 2列宽度自适应
1 <template> 2 <div> 3 <div class="left">左列</div> 4 <div class="right">右列</div>
![](https://images2018.cnblogs.com/blog/1425888/201806/1425888-20180628221441182-2005099679.png)
5 </div> 6 </template> 7 8 <script> 9 export default { 10 name: 'Home' 11 } 12 </script> 13 14 <style scoped> 15 .left{ 16 background: blue; 17 border: 20px solid #333; 18 width: 20%; 19 height: 300px; 20 float: left; 21 } 22 .right{ 23 background: red; 24 border: 20px solid #333; 25 width: 70%; 26 height: 300px; 27 float: left; 28 } 29 </style>
之所以右栏不设置80%,是因为存在border,若设置为80%,则会撑到下1行中。【注:实际效果是80%并不会到撑到下1栏,而设置80%以上才会撑到下1栏】
后面可以根据border来使得两列的布局占满整个屏幕。
(6)2列中左侧固定,右列宽度自适应
1 <template> 2 <div> 3 <div class="left">左列</div> 4 <div class="right">右列</div>
![](https://images2018.cnblogs.com/blog/1425888/201806/1425888-20180628222515836-604102535.png)
5 </div> 6 </template> 7 8 <script> 9 export default { 10 name: 'Home' 11 } 12 </script> 13 14 <style scoped> 15 .left{ 16 background: blue; 17 border: 20px solid #333; 18 width: 100px; 19 height: 300px; 20 float: left; 21 } 22 .right{ 23 background: red; 24 border: 20px solid #333; 25 height: 300px; 26 } 27 </style>
左栏设置固定宽度且向左浮动,右栏不设置宽度并且不浮动;
(7)2列固定宽度居中
1 <template> 2 <div class="layout"> 3 <div class="left">左列</div> 4 <div class="right">右列</div>
![](https://images2018.cnblogs.com/blog/1425888/201806/1425888-20180628223125370-507803608.png)
5 </div> 6 </template> 7 8 <script> 9 export default { 10 name: 'Home' 11 } 12 </script> 13 14 <style scoped> 15 .layout{ 16 margin: 0px auto; 17 width: 680px; 18 } 19 .left{ 20 background: blue; 21 border: 20px solid #333; 22 width: 300px; 23 height: 300px; 24 float: left; 25 } 26 .right{ 27 background: red; 28 border: 20px solid #333; 29 height: 300px; 30 width: 300px; 31 float: left; 32 } 33 </style>
layout容器的宽度需要 >= 300px + 300px + 20px + 20px + 20px + 20px,故这里设置为680是可以的。
(8)3列浮动中间列宽度自适应
1 <template> 2 <div> 3 <div class="left">左列</div> 4 <div class="center">中间列</div> 5 <div class="right">右列</div>
![](https://images2018.cnblogs.com/blog/1425888/201806/1425888-20180628224342175-9797509.png)
6 </div> 7 </template> 8 9 <script> 10 export default { 11 name: 'Home' 12 } 13 </script> 14 15 <style scoped> 16 .center{ 17 background: #fff; 18 border: 20px solid #333; 19 height: 300px; 20 margin-left: 104px; 21 margin-right: 104px; 22 } 23 .left{ 24 background: blue; 25 border: 20px solid #333; 26 width: 100px; 27 height: 300px; 28 position: absolute; 29 top: 0px; 30 left: 0px; 31 } 32 .right{ 33 background: red; 34 border: 20px solid #333; 35 height: 300px; 36 width: 100px; 37 position: absolute; 38 top: 0px; 39 right: 0px; 40 } 41 </style>