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

课程

/前端开发

/HTML/CSS

/如何用CSS进行网页布局

这节课发现一个问题，对于新手来说绝对是一个问题

这一课程老师在最后一节编程挑战里挖了个坑，我不知道老师是有意思为之还是弄错了，

任务2：中间分为2两栏，其中，左侧（left）宽度为200px， 右侧（right）宽度自适应

<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>

如果按照任务来的话CSS代码是这样写的

.left{background:#0000FF;height:500px;width:200px;float:left;}

.right{background:#00CC99;height:500px;margin-left:210px;}

但是这样写出来布局就是乱的

原因就是(main)里的（right）和（left）顺序写错了

应该

<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>

要么就改CSS部分

.right{background:#0000FF;height:500px;width:200px;float:left;}

.left{background:#00CC99;height:500px;margin-left:210px;}

反正就是两个部分顺序要改一下，不然达不到任务的要求。



慕瓜5980833

2016-08-22

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

关注问题 我要回答
907
操作
收起

正在回答

2 回答

吾以青春赌未来 回答被采纳 +3 积分
2016-08-23

任务3：要求右侧（right）先加载，左侧（left）后加载
所以应该给left添加样式：position:absolute;left:0;top:100px;

这样的话就可以了

1 回复 有任何疑惑可以回复我~
收起回答
#1

慕瓜5980833 提问者

非常感谢！
2016-08-23 回复 有任何疑惑可以回复我~
#2

yuqingzhijie3596863

为什么这样就会先加载左边呢？
2016-09-02 回复 有任何疑惑可以回复我~
#3

yuqingzhijie3596863 回复 yuqingzhijie3596863

写错了，右边
2016-09-02 回复 有任何疑惑可以回复我~
慕丝5304739
2016-08-23

<div class="right">right</div>

    <div class="left">left</div>

可能是顺序写错了；

光用浮动达不到要求效果；

除非使用绝对定位；

.left{ width:37%; height:300px;background:blue;position:absolute; top:0px; left:0px;}

.right{width:61%; height:300px;background:green;float:right;     }


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

SSC解说员

你这个宽度，为百分比，就是不按照规则设置宽度为200（left），显然是有一定的问题，我已经实现了题目要求。
2016-08-23 回复 有任何疑惑可以回复我~
#2

哎哟Zhou哥哥 回复 SSC解说员

能不能发代码看看，我不太懂
2016-10-15 回复 有任何疑惑可以回复我~

举报

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

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

进入课程

这节课发现一个问题，对于新手来说绝对是一个问题

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