css混合布局遇到問題
<!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{height:100px;background:#D4CDD4;position:relative;}
.head{width:800px;height:100px;background:#C2B9B9;margin:0 auto;}
.main{width:800px;height:600px;background:red;margin:0 auto;position:relative;}
.right{height:600px;background:#00CC99;margin-left:210px;}
.left{width:200px;height:600px;background:#0000ff;position:absolute;top:0;left:0;}
.foot{height:100px;background:orange;}
</style>
</head>
<body>
<div class="top">top
<div class="head">head</div>
</div>
<div class="main">
? ? <div class="right">right</div>
? ? <div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
這是我的代碼，想實現像教學視頻中，top塊里面套一個居中的head塊，main部分有左右兩欄，左邊定寬右邊自適應，foot塊在最下方，遇到兩個問題
首先我的代碼中top和head高度相同，但顯示出來head塊雖然居中了但高度沒有把top塊填滿，這是為什么呢？之后我用定位的方法，top（relative）head（absolute），然后設置top:0 能夠填滿，但是這樣就設置不了居中了。。
第二個是main塊左右欄問題，最開始我沒用定位用的浮動，但是left塊就跑到main塊下面了，如果把HTML里面left和right的位置換過來就好了，這是為什么呢？
問題比較瑣碎，麻煩大家幫忙看一下，非常感謝
2016-08-24
我覺得，你需要去理解一下標準文檔流（flow）。我只知道有float和postion：absolute可以將元素從文檔流中抽離出來。
問題1：top{position:relative}沒有將top從文檔流中抽離出來。所以top和head還是在文檔流中，top類中內容“top”，會占一行。所以head從下一行開始。將內容“top"刪除，就可以看到高度填滿了。
問題2：沒有用“position:absolute;top:0;left:0;”的話，類left和類right都塊元素，且在文檔流中，兩者都要占整行，所以left塊是跑到right塊下面一行。 在代碼<body>中如果把left和right的位置交換，我測試的結果是right塊會在left塊下面一行。
希望能幫到你。
2016-08-25
提供一個參考意見吧：
問題2你說?用浮動結果left跑到下一行去了可能是因為這樣：
A: ?
↓
原因是你給left right其中一個加了float;解決方法是給兩個都加上float.（但這樣right會變瘦...還不如用relative+absolute）
其它問題，我愛莫能助了，最后也只做到了：
抱歉，沒有達到你的要求。
同樣期待有人能解決這個問題呀！
2016-08-24
技術不夠啊，第一個問題我也不知道，按照老師寫的輸入就可以，把你的輸入進去怎么都改不不來，不知道咋回事！第二個問題你需要改仔細修整一下你的代碼，我感覺比較亂，如果使用浮動呢，都可以把左右塊的浮動都加上就好了，如果使用position就把布局都采用這個就好了，不要混亂用！除非特殊情況例如三列或兩列中需要寬度自適應的