在高度已知道的情况下,左栏,右栏宽度各位300px,中间自适应
第一种方式 浮动
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动方法</title> <style> *{ padding: 0; margin: 0; } div{ height: 500px; } .left{ width: 300px; float: left; background: darkred; } .center{ margin: 0 300px; background: red; } .right{ width: 300px; float: right; background: darkred; } </style> </head> <body> <div class="box"> <div class="left">左边部分</div> <div class="right">右边部分</div> <div class="center">中间部分</div> </div> </body> </html>
|
第二种方式 绝对定位
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三栏布局</title> <style> *{ padding: 0; margin: 0; } .box div{ position: absolute; height: 500px; } .box .left{ left: 0; width: 300px; background: darkred; } .box .center{ left: 300px; right: 300px; background: red; } .box .right{ right: 0; width: 300px; background: darkred; } </style> </head> <body> <div class="box"> <div class="left">左边部分</div> <div class="center"> <h2>绝对定位解决方案</h2> 这是三栏布局中间部分 </div> <div class="right"> 右边部分 </div> </div> </body> </html>
|
第三种方式 flex 弹性布局
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三栏布局</title> <style> *{ padding: 0; margin: 0; } .box{ display: flex; } .box div{ height: 500px; } .box .left{ width: 300px; background: darkred; } .box .center{ background: red; flex: 1; } .box .right{ width: 300px; background: darkred; } </style> </head> <body> <div class="box"> <div class="left">左边部分</div> <div class="center"> <h2>flexbox 解决方案</h2> 这是三栏布局中间部分 </div> <div class="right"> 右边部分 </div> </div> </body> </html>
|
第四种方式 flex 表格布局
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三栏布局</title> <style> *{ padding: 0; margin: 0; } .box{ width: 100%; display: table; height: 500px; } .box div{ height: 500px; display: table-cell; } .box .left{ width: 300px; background: darkred; } .box .center{ background: red; } .box .right{ width: 300px; background: darkred; } </style> </head> <body> <div class="box"> <div class="left">左边部分</div> <div class="center"> <h2>表格布局 解决方案</h2> 这是三栏布局中间部分 </div> <div class="right"> 右边部分 </div> </div > </body> </html>
|
第五种方式 flex 网格布局
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三栏布局</title> <style> *{ padding: 0; margin: 0; } .box{ width: 100%; display: grid; grid-template-rows:500px; grid-template-columns:300px auto 300px; } .box .left{ background: darkred; } .box .center{ background: red; } .box .right{ background: darkred; } </style> </head> <body> <div class="box"> <div class="left">左边部分</div> <div class="center"> <h2>网格布局 解决方案</h2> 这是三栏布局中间部分 </div> <div class="right"> 右边部分 </div> </div> </body> </html>
|