为了账号安全,请及时绑定邮箱和手机立即绑定

不知道这题的任务,这样的代码对不对,感觉答案是错的啊!!

<style type="text/css">

body{ margin:0; padding:0; font-size:30px; color:#fff}

.top{height:100px; background:gray;}

.main{ height:500px; background:red;}

.left{width:200px; height:500px; background:blue; float:left;}

.right{position:absolute; margin-left:210px; background:#9c9; height:500px;}

.foot{background:#F63; height:50px;}

</style>


正在回答

2 回答

<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{height:200px;background-color:gray;}
.main{height:500px;background-color:red;}
.left{position:absolute;left:0px;top:200px;width:200px;background-color:blue;height:500px;}
.right{margin-left:210px;background-color:green;height:500px;}
.foot{height:100px;background-color:#333;}
</style>


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

JasmineFan 提问者

非常感谢!
2016-10-15 回复 有任何疑惑可以回复我~

按照你的写法,宽度中加入width:100%  就可以达到要求的布局效果,因为position:absolute 让.right脱离文档流成为行内块状元素,而行内块状元素默认宽度为文本宽度,所以.right不能占满main的右边

然后再分析一下spirit6的写法:.left相对于body绝对定位 left:0; top:200px;同时脱离了文档流   .right还是块状元素,所以排在top下面,设置margin就可以了。

我是也新手,我喜欢看一看问答里的问题和答案并分析透彻,这中间能学到很多方法,并帮助自己理解和记忆,嘿嘿。。。。。。 

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

举报

0/150
提交
取消
如何用CSS进行网页布局
  • 参与学习       209624    人
  • 解答问题       1153    个

用最简洁的案例教你布局的那些知识,这是前端工程师基本技能

进入课程

不知道这题的任务,这样的代码对不对,感觉答案是错的啊!!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信