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