<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自适应3列布局</title> <style type="text/css"> body{ margin: 0; padding: 0; } .left{ width: 33.33%; height: 500px; background-color: #ccc; float: left; } .middle{ width: 33.33%; height: 500px; background-color: #999; float: left; } .right{ width: 33.33%; height: 500px; float: right; background-color: red; } </style> </head> <body> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </body> </html>