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

代码写成下面这样不知道行不行啊?中间那块红色我设置成了一个背景颜色。

<!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">
.box{width:960px;margin:0 auto;background:#F00;}
.box .top{height:90px;background:#999;}
.box .left{width:300px;height:600px;background:blue;float:left;}
.box .right{width:640px;height:600px;background:#0C9;float:right;}
.box .foot{height:60px;background:#F63;clear:both;}
</style>
</head>
<body>
<div class="box">
	<div class="top">top</div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="foot">foot</div>
</div>
</body>
</html>


正在回答

4 回答

你首先应该理解的是,分层的概念,也就是说,文档流,position,float其实是三个层,每个层之间都是相互拦截的。如果元素离开了文档流,那么float就会票起来。所以,如果你需要设置自适应的话,不应该用float,因为float必须要有宽度,虽然可以飘起来。但是position,就没有宽度要求,还可以漂起来。所以一般的自适应宽度使用position实现,才是合理的标准做法, 兼容性也好!

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

福尔摩牙 提问者

多谢指导
2016-03-13 回复 有任何疑惑可以回复我~
#2

福尔摩牙 提问者

非常感谢!
2016-03-13 回复 有任何疑惑可以回复我~
#3

慕盖茨5114537

老师给的答案应该是有问题的
2016-04-12 回复 有任何疑惑可以回复我~

这种情况需求的.right的百分比并不是确定的呢,所以还是不行的。

可以看看别人的代码,.left绝对定位,.right用margin-left留出左边的空间来。

再试试吧!(ง •̀_•́)ง

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

福尔摩牙 提问者

嗯,好的,多谢了!
2016-03-11 回复 有任何疑惑可以回复我~

不是要求右边宽度要自适应吗?

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

福尔摩牙 提问者

自适应的话,把宽度用像素形式改成百分比形式可以吗?
2016-03-10 回复 有任何疑惑可以回复我~

chrome下是这样

http://img1.sycdn.imooc.com//56e01b470001f3f607470584.jpg

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

举报

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

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

进入课程

代码写成下面这样不知道行不行啊?中间那块红色我设置成了一个背景颜色。

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