在具有可变高度的父 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>

我希望 content1 始终位于顶部，而 content4 始终位于底部，还希望 content2 和 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;;
}