（1）1列固定宽度
1 <template> 2 <div> 3 <div class="layout">1列固定宽度</div>
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>
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>
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>
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>
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>
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>
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>
扫描二维码关注公众号，回复：
1778076 查看本文章
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>