CSS:左侧定宽右侧自适应布局

　　在慕课网学习《如何用CSS进行网页布局》时，最后的编程作业题目如下：

任务

任务1：完成顶部（top）、底部（foot）宽度自适应

任务2：中间分为2两栏，其中，左侧（left）宽度为200px， 右侧（right）宽度自适应

任务3：要求右侧（right）先加载，左侧（left）后加载

任务4：编写的代码要兼容ie6

题目给出的答案为如下代码：

html部分：

<div class="top">top</div>
<div class="main">
       <div class="right">right</div>
    <div class="left">left</div>
</div>
<div class="foot">foot</div>

CSS部分

.top{height:100px; background:#ccc}
.left{ width:200px; height:500px; background:blue; }
.right{ margin-left:210px;height:500px; background:#9C9;}
.foot{ height:50px; background:#F63 }

然而该方案并不可行，显示效果如下：

显然，left与foot出现了错位。解决思路：left使用绝对定位，right使用相对定位，浮动于右侧，利用margin-left保留left的显示。

代码如下

.top{height:100px;background-color:silver;}
.main{height:400px;}
.left{width:200px;height:400px;background-color:blue;position:absolute; left:0;}
.right{height:100%;background-color:grey;float:left;width:100%;margin-left:200px}
.foot{height:100px;background-color:lime}
</style>

效果如下：

如何用CSS进行网页布局