<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{ background:#999; width:100%; }
.main{background:red; height:400px;}
.left{width:200px;height:400px;background:blue;float:left}
.right{
height: 400px;
background-color: green;
position:absolute;
margin-left: 210px;
width: 100%;
}
.foot{background:#999; width:100%;clear:both}
</style>按照上述的代码，写完后会出现right宽度溢出。根据我理解，因为left的宽是定值，所以left可以是用float或者绝对定位，而right需要自适应宽度，应该是100%-200px，那么这个应该如何用css表达？
2017-02-18
底下body里的代码是right在left上面，我试了各种用float写不出︿(￣︶￣)︿初学者
.top{margin:0 auto;background:#ccc;height:80px;}
.main{background:red;height:500px;}
.left{ height:500px;width:200px;background:blue;position:absolute;left:0;}
.right{height:500px;background:#6c9;position:absolute;right:0;left:210px;}
.foot{background:orange;height:50px;}
如果用这里的学到的，只能用绝对定位和相对定位混合用法，代码如下：
<!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;background:#000;font-size:20px;
}
.top{
width:100%;height:100px;background:#ccc;
}
.main{
width:100%;height:500px;background:red;position:relative;
}
.left{
width:200px;height:500px;background:blue;
float:left;
}
.right{
height:500px;background:green;
position:absolute;left:210px;right:0px;
}
.foot{
width:100%;height:100px;background:orange;
}
</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>
.top{background:#ccc;height:100px;}
.main{height:600px;background:red;}
.left{width:200px; height:600px;background:blue;}
.right{height:600px;background:yellow;left:210px;width:100%;position:absolute;}
.foot{background:orange;height:50px;}
我实现了,这是我尝试的最简洁的代码，利用position:absolute将块级元素right隐性转化为内联块状元素（因为我尝试了去掉width：100%，结果right的宽度就变为包裹内容了），然后通过绝对定位的左边距210px来定位，重新载入width为100%变为自适应，然后在答案内测试完成，未本地实验，有错请指出~tks
举报
