Web page layout and positioning

(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