                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

5-3编程挑战

任务三中<body>中按照标准文档流特征，本来也是先加载right层（它在前），后加载left层（它在后），为什么还要特意要求？编写的代码要兼容ie6，怎么做？谢谢！

另，我写的代码。帮我看看，懂得同学帮我改正一下，谢谢了！

body{ margin:0; padding:0; _padding:0;font-size:30px;color:#fff}
.top{width:100%;height:100px;background:#ccc;margin:}
.main{width:100%; height:500px;background:red;margin:0 auto;position:relative; overflow:hidden;}
.left{width:200px;height:500px;background:blue;float:left;left:0;top:0;}

.right{width:100%;height:500px;background:green;position:absolute;margin-left:210px;}
.foot{width:100%;background:yellow;clear:both;}

慕粉4340077

2016-11-12

源自：如何用CSS进行网页布局 5-3

关注问题我要回答

434

操作

收起

2 回答

雨夜屠夫
2016-11-14

<!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}
.top{height:100px;margin:0 auto;background:#ccc;}
.main{background:red;}
.left{ width:200px;height:500px;background:blue;position:absolute;left:0;top:100px;}
.right{height:500px;margin-left:210px;background:green;}
.foot{height:50px;margin:0 auto;background:#f90;}
</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>

0 回复有任何疑惑可以回复我~

收起回答

慕粉4340077 提问者

你的代码我试了试，确实可以达到效果图中的样子，只是我还有几个不明白的，如下：问一：top层和foot层宽度自适应不是应该设置为width:100%吗？你的直接margin:0 auto;这个好像是水平自动居中的吧问二：right层宽度自适应怎么做的？你的代码中没有设置宽度啊，怎么回事？问三：right层要比left层先加载，这个按照标准文档流的特点来说，不需要人为干涉也应该是这样的啊（因为right层在left层前面，所以先加载），为什么任务中要特意要求？问四：兼容ie6怎么做？好吧我的问题多了些，哈哈，给你添麻烦了！如果知道的话，恳请不吝赐教，谢谢了！！

2016-11-14 回复有任何疑惑可以回复我~

雨夜屠夫回复慕粉4340077 提问者

不指定宽度，默认是父级元素的100%吧，设定外边距为0，意思就是充满了整个页面，也就是整个浏览器宽度了；答二：right层宽度自适应要求是其可以随着浏览器大小变化宽度，所以不能指定宽度；答三：按照我的理解是，最后效果是left在左，right在右，按标准文档流，left类标签应该是在right的上方的，这样也容易实现，但是实际的标签中，right类标签在上方，会麻烦一点；答四：不知道，我用IE6打开没问题就没管了，据说要写hack脚本

2016-11-15 回复有任何疑惑可以回复我~

慕粉4340077 提问者回复雨夜屠夫

谢谢，你的回答很好。

2016-11-15 回复有任何疑惑可以回复我~