為什么我的green很窄
<!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;?font-size:30px;?color:#fff}.top{background-color:#ccc;height:100px}.main{background-color:red;height:600px;position:relative;}.left{background-color:blue;width:200px;height:600px;position:absolute;margin-left:0}.right{background-color:green;margin-left:210px;height:600px;position:absolute}.foot{background-color:#f93;height:100px;}</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><!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; font-size:30px; color:#fff}
.top{background-color:#ccc;height:100px}
.main{background-color:red;height:600px;position:relative;}
.left{background-color:blue;width:200px;height:600px;position:absolute;margin-left:0}
.right{background-color:green;margin-left:210px;height:600px;position:absolute}
.foot{background-color:#f93;height:100px;}
</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>
2018-06-15
.right{background-color:green;margin-left:210px;height:600px;position:absolute}這句話中你使用了絕對定位，然后給她的左側邊緣定義了210px，但是它沒有寬度啊。于是它就使用了默認的寬度也就是內容的寬度。
題目要求我們自適應它的寬度。而且right要先加載，所以我能想到的方法只有使用絕對定位定義左右的位置（left：210px;right:0px）使其限定在這個位置中。想必您也想到了，只是使用的方法有些混淆。
更改方式
.right{ ????background-color:gree; ????height:600px; ????pisition:absolute; ????left:210px;???/*10px預留空位*/ ????right:0px; }希望對你能有所幫助。