（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>
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>网页布局与定位
原文地址：https://www.cnblogs.com/lanyb009/p/9241252.html