两列布局_左侧固定_右侧自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列布局_左侧固定_右侧自适应</title>
<style type="text/css">
.left{
width: 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>
