我们通过一个实例来看一下：
本编程题目，完成一个混合布局的编写吧！最终效果如下图：
任务
任务1：完成顶部（top）、底部（foot）宽度自适应
任务2：中间分为2两栏，其中，左侧（left）宽度为200px， 右侧（right）宽度自适应
任务3：要求右侧（right）先加载，左侧（left）后加载
任务4：编写的代码要兼容ie6
css代码：
<title>混合布局编程挑战</title><style type="text/css">body { ???margin: 0; ???padding: 0; ???font-size: 30px; ???color: #fff}.top { ???height: 100px; ???background: #ccc;}.main { ???height: 500px; ???background: red; ???margin: 0 auto;}.left { ???position: absolute; ???left: 0; ???top: 100px; ???width: 200px; ???height: 500px; ???background: blue;}.right { ???height: 500px; ???background: green; ???margin-left: 210px;}.foot { ???height: 50px; ???background: orange;}</style></head>HTML代码：
<body><div class="top">top</div><div class="main"> ?<!--注意此处的right和left顺序--> ?<div class="right">right</div> ?<div class="left">left</div></div><div class="foot">foot</div></body>
代码中的背景颜色，没有按照图中的设置（因为懒哈 没有用ps吸取颜色代码）
做出来的效果图
先说一下怎么完成的任务二，1.先用绝对定位把固定宽度的左栏固定到左侧，然后再用 margin-left值等于左栏的宽度200px(此处为了和题中的效果图一样所以多加了10px，即红色部分)。从而达到了右栏宽度自适应的要求。
下面我们来说一下关于优先加载的问题：
这句话其实就是html结构中的：
<div class="main"><div class="right">right</div><div class="left">left</div></div>
上面的带码有没有发现在 先写的right后写的 left，
因为代码是顺序执行的，所以也就是题目要求中的 右栏（right）先加载，左栏（left）后加载。因为实际应用中很明显右栏（一般为网页主要内容）的栏目比左栏（一半为导航内容什么的）的栏目内容重要。
改变html结构可以实现优先加载
原文地址：http://www.cnblogs.com/peachblossom/p/7616052.html