問題是您正在使用稱爲絕對的定位格式。這意味着每個div都按照您定義的座標精確定位在屏幕上,其他div(也是絕對定位的)不會影響其他任何div的位置。
如果您使用position:relative而不是position:absolute,那麼它可能會讓您沿着正確的方向行進。
閱讀其中的一些,他們可能會有所幫助:
http://www.communitymx.com/content/article.cfm?page=2&cid=3B56F
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
我不知道你的頁面是爲了看起來像,但是這個基本概念開始,建立自己的技能圍繞它:)
#Header, #Content, #Footer{
position:relative;
width:100%;
}
#Header{
height:100px;
background:yellow;
}
#Content{
height:400px;
background:green;
}
#Footer{
height:100px;
background:blue;
}
和HTML將
<body>
<div id="Header">Put your header stuff here.</div>
<div id="Content">Put your content here.</div>
<div id="Footer">Put your footer stuff here.</div>
</body>
把孩子放在正確的部分,並設置他們的位置相對也。
玩這些,看看你是如何相處。花盡可能多的時間,因爲你可以真正理解定位,一旦你有這個堅實的基礎,你會發現設計更容易!
很抱歉,如果我不夠具體,我敢肯定,在其他一些不錯的傢伙,所以會加重這個,給你一隻手,如果他們有什麼建設性的補充:)
你能後的圖像你的佈局希望?它很難理解你想要做什麼... – gearsdigital 2011-02-03 22:14:50
我會打賭(沒有詳細看問題),這是一個問題,這將在很大程度上通過使用'overflow:hidden'來解決。 – 2011-02-03 22:17:22