<!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>
是不是有错的地方？拜托帮我解答一下。先谢谢了！
3 回答
已采纳
woshiajuana
TA贡献211条经验 获得超152个赞
像你这种定位方法的话，错误有三：
1、布局错误，right和left的位置
2、.right{background:#9f9;height:600px;margin-left:210px;position:absolute;width:100%}中不能给绝对定位，一绝对定位就脱离了文档流
3、还是上面那句，right不能给width为100%，这样会让right的宽度等于main的宽度
woshiajuana
TA贡献211条经验 获得超152个赞
<!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>
- 3 回答
- 1 关注
- 1905 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消