1.第一种用position
2.第二种用浮动
3.第三种用的flex
*需要注意的是前两种均是将中间列放在最后
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .left{ position: absolute; height: 40px; width: 200px; left: 0; background-color: #dddddd; } .right{ position: absolute; height: 40px; width: 200px; right: 0; background-color: #8b8878; } .center{ margin-left: 200px; margin-right:200px; background-color: red; height:40px; } .two_left{ float:left; height: 40px; width: 200px; background-color: #dddddd; } .two_right{ float: right; height: 40px; width: 200px; background-color: #8b8878; } .two_center{ margin-left: 200px; margin-right:200px; background-color: red; height: 40px; } .flex-box{ display: flex; } .three_left{ width:200px; height:40px; background-color: #dddddd; } .three_right{ background-color: #8b8878; width:200px; height:40px; } .three_center{ background-color: red; flex:1; } </style> </head> <body> <div class="left">1</div> <div class="right">2</div> <div class="center">3</div> <br/> <div class="two_left">1</div> <div class="two_right">2</div> <div class="two_center">3</div> <br/> <div class="flex-box"> <div class="three_left">1</div> <div class="three_center">2</div> <div class="three_right">3</div> </div> </body> </html>