(1) 1 Column fixed width
1 <template> 2 <div> 3 <div class= "Layout" >1 column fixed width </div>
4</div>5</template>6 7<script>8Exportdefault {9Name: ' Home 'Ten } One</script> A -<style scoped> - . layout{ the background:red; -border:20px Solid #333; - width:300px; - height:300px; + } -</style>
So the total width is = 300px + 20px;
(2) 1 column width adaptive
1 <template> 2 <div> 3 <div class= "Layout" >1 column fixed width </div>
4</div>5</template>6 7<script>8Exportdefault {9Name: ' Home 'Ten } One</script> A -<style scoped> - . layout{ the Background:blue; -border:20px Solid #333; -width:80%; - height:300px; + } -</style>
The width is adaptive by percent, the total width is =80% window size + 20px;
(3) 1 Column fixed width center
1 <template> 2 <div> 3 <div class= "Layout" >1 column fixed width </div>
4</div>5</template>6 7<script>8Exportdefault {9Name: ' Home 'Ten } One</script> A -<style scoped> - . layout{ the Background:blue; -border:20px Solid #333; - width:300px; - height:300px; + margin:0px Auto; - } +</style>
(4) 2 column fixed width
1 <template> 2 <div> 3 <div class= "left" > right column </div> 4 <div class= "Right" > left column </div>
5</div>6</template>7 8<script>9Exportdefault {TenName: ' Home ' One } A</script> - -<style scoped> the . left{ - Background:blue; -border:20px Solid #333; - width:300px; + height:300px; - float: Left; + } A . right{ at background:red; -border:20px Solid #333; - width:300px; - height:300px; - float: Left; - } in</style>
Border no overlap, so the middle black part width is =20px + 20px;
(5) 2 column width adaptive
1 <template> 2 <div> 3 <div class= "left" > right column </div> 4 <div class= "Right" > left column </div>
5</div>6</template>7 8<script>9Exportdefault {TenName: ' Home ' One } A</script> - -<style scoped> the . left{ - Background:blue; -border:20px Solid #333; -width:20%; + height:300px; - float: Left; + } A . right{ at background:red; -border:20px Solid #333; -width:70%; - height:300px; - float: Left; - } in</style>
The right column does not set 80%, because there is a border, if set to 80%, it will hold to the next 1 rows. "Note: The actual effect is 80% and will not go to the next 1 columns, and set 80% or more will support the next 1 column"
Later, you can make the layout of the two columns fill the entire screen, depending on the border.
(6) 2 column left fixed, right column width adaptive
1 <template> 2 <div> 3 <div class= "left" > right column </div> 4 <div class= "Right" > left column </div>
5</div>6</template>7 8<script>9Exportdefault {TenName: ' Home ' One } A</script> - -<style scoped> the . left{ - Background:blue; -border:20px Solid #333; - width:100px; + height:300px; - float: Left; + } A . right{ at background:red; -border:20px Solid #333; - height:300px; - } -</style>
Left column fixed width and left floating, the right column does not set width and does not float;
(7) 2 Column fixed width center
1 <template> 2 <div class= "Layout" > 3 <div class= "left" > leftmost column < /div> 4 <div class= "Right" > left column </div>
5</div>6</template>7 8<script>9Exportdefault {TenName: ' Home ' One } A</script> - -<style scoped> the . layout{ - margin:0px Auto; - width:680px; - } + . left{ - Background:blue; +border:20px Solid #333; A width:300px; at height:300px; - float: Left; - } - . right{ - background:red; -border:20px Solid #333; in height:300px; - width:300px; to float: Left; + } -</style>
Layout container width requires >= 300px + 300px + 20px + 20px + 20px + 20px, so it is possible to set this to 680.
(8) 3 columns Floating middle column width adaptive
1 <template> 2 <div> 3 <div class= "left" > right column </div> 4 <div class= "center" > Middle column </div> 5 <div class= "Right" > left column </div>
6</div>7</template>8 9<script>TenExportdefault { OneName: ' Home ' A } -</script> - the<style scoped> - . center{ - background: #fff; -border:20px Solid #333; + height:300px; -margin-left:104px; +margin-right:104px; A } at . left{ - Background:blue; -border:20px Solid #333; - width:100px; - height:300px; - Position:absolute; in top:0px; - left:0px; to } + . right{ - background:red; theborder:20px Solid #333; * height:300px; $ width:100px;Panax Notoginseng Position:absolute; - top:0px; the right:0px; + } A</style>
Web page layout and positioning