<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>两列布局_右侧固定_左侧自适应</title> <style type="text/css"> .right{ 200px; height: 600px; background-color: aqua; float: right; } .main{ height: 600px; background-color: #8B4513; margin-right: 200px; } </style> </head> <body> <h2>基本思路</h2> <ol> <li>左侧固定,并设置为左浮动</li> <li>右侧主体部分设置一个左边距,它的宽度只要大于等于左侧的宽度就可以</li> </ol> <!-- DOM --> <div class="right">右侧</div> <div class="main">主体</div> </body> </html>