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

请大神进来指点

请大神看我的代码,初学,虽然知道写的很low,但是效果还是出来了,想问一下,有些人foot里面写了clear:both(清除浮动),我没有写,为什么还是可以显示,这样写代码还有救吗

正在回答

2 回答

body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{height:100px;background:#ccc;width:100%;}
.main{height:300px;background:red;}
.left{height:300px; width:200px;background:blue;float:left;}
.right{height:300px;background:green;}
.foot{height:50px;background:yellow;}

求指点

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

朦胧是种美

用的不是浮动 而是层布局用relative和absolute的结合使用 将left定位在main的左上方,right就可以margin-left相对父容器210px,多出一点和任务相同,因为left在main中使用absolute定位,所以right布局会忽略掉left
2017-08-03 回复 有任何疑惑可以回复我~

这段代码你并没有实现任务要求,任务要求的是右边的div的宽是自适应的,我研究了一下你的代码,我觉得应该是你把left和right的位置弄反了所以才不需要清除浮动,如果不是弄反,布局还是乱的,

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

.top,.foot{

height:100px;

}

.main,.right,.left{

height:300px;

}

.top{

background:#ccc;

}

.foot{

background:#542;

}

.main{

background:red;

position:relative;

}

.left{

background: blue;

width:200px;

position:absolute;

left:0;

top:0;

}

.right{

background:green;

margin-left:210px;

}

你可以看看我的代码,可能也不是很好,至少实现了把



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

短发是小丸子 提问者

非常感谢你,我现在看任务都不是很懂 ,谢谢你的指导,我慢慢改
2017-06-09 回复 有任何疑惑可以回复我~
#2

短发是小丸子 提问者

你好,请问 left{ background: blue; width:200px; position:absolute; left:0; top:0; } .right{ background:green; margin-left:210px; 这段代码主要有什么意思,什么代码才能设置右边宽度自适应呢
2017-06-09 回复 有任何疑惑可以回复我~
#3

surprisingL 回复 短发是小丸子 提问者

宽的自适应是div不设置宽的话 宽就是自适应,自适应的意思就是div的宽的大小随着你的网页窗口的大小而改变,我觉得你应该去补一下基础,块状元素,内联元素,内联块状元素,还有浮动的属性,定位的属性,都要补一下,一下子也跟你说不完,你自己去补一下
2017-06-10 回复 有任何疑惑可以回复我~
#4

Bozens 回复 短发是小丸子 提问者

简单的解释一下,就是宽度200px的 一个div 相对定位,左 0 上0 右边的是向左margin210px 因为是没有设置宽度,所以是自适应的,因为position 也是浮动,margin-left 会根据外面的边框进行外留白
2017-07-19 回复 有任何疑惑可以回复我~
#5

Bozens 回复 Bozens

position绝对定位写错了
2017-07-19 回复 有任何疑惑可以回复我~
查看2条回复

举报

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

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

进入课程

请大神进来指点

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