<!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>混合布局編程挑戰(zhàn)</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff;width:100%}
.top{height:50px;background:#ccc}
.main{width:100%;height:600px;background:pink;margin:0 auto;}
.left{ width:200px;background:#f90;height:600px;float:left}
.right{background:#9f9;height:600px;margin-left:210px;position:absolute;width:100%}
.foot{height:50px;background:#fcc;}
/*任務(wù)1：完成頂部（top）、底部（foot）寬度自適應(yīng)
任務(wù)2：中間分為2兩欄，其中，左側(cè)（left）寬度為200px， 右側(cè)（right）寬度自適應(yīng)
任務(wù)3：要求右側(cè)（right）先加載，左側(cè)（left）后加載
任務(wù)4：編寫(xiě)的代碼要兼容ie6*/
</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>
是不是有錯(cuò)的地方？拜托幫我解答一下。先謝謝了！
3 回答
已采納
woshiajuana
TA貢獻(xiàn)211條經(jīng)驗(yàn) 獲得超152個(gè)贊
像你這種定位方法的話，錯(cuò)誤有三：
1、布局錯(cuò)誤，right和left的位置
2、.right{background:#9f9;height:600px;margin-left:210px;position:absolute;width:100%}中不能給絕對(duì)定位，一絕對(duì)定位就脫離了文檔流
3、還是上面那句，right不能給width為100%，這樣會(huì)讓right的寬度等于main的寬度
woshiajuana
TA貢獻(xiàn)211條經(jīng)驗(yàn) 獲得超152個(gè)贊
<!DOCTYPE html>
<html>
<head>
? ?<meta http-equiv="content-type" content="text/html; charset=utf-8" />
? ?<title>混合布局編程挑戰(zhàn)</title>
? ?<style type="text/css">
? ? ? ?body{ margin:0; padding:0; font-size:30px; color:#fff;width:100%}
? ? ? ?.top{height:50px;background:#ccc}
? ? ? ?.main{width:100%;height:600px;background:pink;margin:0 auto;}
? ? ? ?.left{ width:200px;background:#f90;height:600px;float:left}
? ? ? ?.right{background:#9f9;height:600px;margin-left:210px;}
? ? ? ?.foot{height:50px;background:#fcc;}
? ? ? ?/*任務(wù)1：完成頂部（top）、底部（foot）寬度自適應(yīng)
? ? ? ?任務(wù)2：中間分為2兩欄，其中，左側(cè)（left）寬度為200px， 右側(cè)（right）寬度自適應(yīng)
? ? ? ?任務(wù)3：要求右側(cè)（right）先加載，左側(cè)（left）后加載
? ? ? ?任務(wù)4：編寫(xiě)的代碼要兼容ie6*/
? ?</style>
</head>
<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>
</body>
</html>