为什么就是无法自适应？

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff;width:100%}
.top{height:50px;background:#ccc}
.main{width:100%;height:600px;background:pink;margin:0 auto;}
.left{ width:200px;background:#f90;height:600px;float:left}
.right{background:#9f9;height:600px;margin-left:210px;position:absolute;width:100%}
.foot{height:50px;background:#fcc;}
/*任务1：完成顶部（top）、底部（foot）宽度自适应
任务2：中间分为2两栏，其中，左侧（left）宽度为200px，右侧（right）宽度自适应
任务3：要求右侧（right）先加载，左侧（left）后加载
任务4：编写的代码要兼容ie6*/
</style>

</head>

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

</body>
</html>
是不是有错的地方？拜托帮我解答一下。先谢谢了！

断桥丶晓风残月

浏览 1906回答 3

3回答

woshiajuana

像你这种定位方法的话，错误有三：1、布局错误，right和left的位置2、.right{background:#9f9;height:600px;margin-left:210px;position:absolute;width:100%}中不能给绝对定位，一绝对定位就脱离了文档流3、还是上面那句，right不能给width为100%，这样会让right的宽度等于main的宽度

alohaXL

请问这是哪个课程？

woshiajuana

<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>混合布局编程挑战</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff;width:100%} .top{height:50px;background:#ccc} .main{width:100%;height:600px;background:pink;margin:0 auto;} .left{ width:200px;background:#f90;height:600px;float:left} .right{background:#9f9;height:600px;margin-left:210px;} .foot{height:50px;background:#fcc;} /*任务1：完成顶部（top）、底部（foot）宽度自适应任务2：中间分为2两栏，其中，左侧（left）宽度为200px，右侧（right）宽度自适应任务3：要求右侧（right）先加载，左侧（left）后加载任务4：编写的代码要兼容ie6*/ </style></head><body><div class="top">top</div><div class="main"> <div class="left">left</div> <div class="right">right</div></div><div class="foot">foot</div></body></html>

随时随地看视频慕课网APP