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;;
}

使用可变高度的父div中的自动边距创建div

1 个答案: