办法一：浮动
<!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>