使得與汽車利潤率的div父DIV與可變高度

Question

我有這樣的代碼

<div style="position: relative;"> 
    /***main***/ 

    <div style="top:0"> 
     /*****Content1****/ 
    </div> 

    <div> 
     /*****Content2****/ 
    </div> 

    <div> 
     /*****Content2****/ 
    </div> 

    <div style="bottom:0"> 
     /*****Content4****/ 
    </div> 

</div> 

我想總是在頂部和content4總是在底部內容1，也希望內容2和content3同樣調整上下頁邊距，使它看起來甚至，我無法做到這一點，因爲父div是可變高度，所有其他div是固定高度。

我認爲這將有助於你理解我想 http://www.spoiledagent.com/ads/Help.jpg

請幫助一下，

Answer 1

你可以試試這個：

http://jsfiddle.net/Q4XaQ/

<div id="main"> 
    <div id="content1">/*****Content1****/</div> 
    <div id="content2">/*****Content2****/</div> 
    <div id="content3">/*****Content3****/</div> 
    <div id="bottom">/*****Content4****/</div> 
</div> 

#main{ 
    margin: 0 auto; 
    width: 960px; 
    background: red; 
} 

#content1{ 
    height: 80px; 
    background: gray; 
} 

#content2{ 
    width:480px; 
    height: 300px; 
    float: left; 
    background: yellow; 
} 

#content3{ 
    width:480px; 
    height: 300px; 
    float: right; 
    background: brown; 
} 

#bottom{ 
    height: 50px; 
    clear:both; 
    background: blue;; 
}