共计 1789 个字符，预计需要花费 5 分钟才能阅读完成。
办法一：浮动
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| .left{ | |
| float:left; | |
| width:200px; | |
| height: 400px; | |
| background: blue; | |
| } | |
| .right{ | |
| float: right; | |
| width: 200px; | |
| height: 400px; | |
| background: red;; | |
| } | |
| .center{ | |
| height: 400px; | |
| background: yellow; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <div class="left"> | |
| 右边 | |
| </div> | |
| <div class="right"> | |
| 左边 | |
| </div> | |
| <div class="center"> | |
| 两头 | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
办法二：flex
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| .wrapper{display: flex;} | |
| .left,.right{ | |
| height: 400px; | |
| width: 200px; | |
| } | |
| .left{background: blue;} | |
| .right{background: red;} | |
| .center{ | |
| flex:1; | |
| height: 400px; | |
| background: yellow; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <div class="left"> | |
| 右边 | |
| </div> | |
| <div class="center"> | |
| 两头 | |
| </div> | |
| <div class="right"> | |
| 左边 | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
办法三：相对布局
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| .wrapper{position: relative;} | |
| .left,.right,.center{ | |
| position: absolute; | |
| height: 400px; | |
| } | |
| .left{ | |
| left:0; | |
| background: blue; | |
| width: 200px; | |
| } | |
| .right{ | |
| right: 0; | |
| background: red; | |
| width: 200px; | |
| } | |
| .center{ | |
| left: 200px; | |
| right: 200px; | |
| background: yellow; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <div class="left"> | |
| 右边 | |
| </div> | |
| <div class="center"> | |
| 两头 | |
| </div> | |
| <div class="right"> | |
| 左边 | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
办法四：table 布局
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| .wrapper{ | |
| display: table; | |
| width: 100%; | |
| } | |
| .left,.right,.center{ | |
| display: table-cell; | |
| height: 400px; | |
| } | |
| .left{ | |
| background: blue; | |
| width: 200px; | |
| } | |
| .right{ | |
| background: red; | |
| width: 200px; | |
| } | |
| .center{background: yellow;} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <div class="left"> | |
| 右边 | |
| </div> | |
| <div class="center"> | |
| 两头 | |
| </div> | |
| <div class="right"> | |
| 左边 | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
办法五：grid 布局
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| .wrapper{ | |
| display: grid; | |
| width: 100%; | |
| grid-template-rows: 400px; | |
| grid-template-columns: 200px auto 200px; | |
| } | |
| .left{background: blue;} | |
| .right{background: red;} | |
| .center{background: yellow;} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <div class="left"> | |
| 右边 | |
| </div> | |
| <div class="center"> | |
| 两头 | |
| </div> | |
| <div class="right"> | |
| 左边 | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
正文完
