位置3 divs

Question

我有3个div，'left div'，'right div'和'bottom div'。我一直在绝望地尝试以某种方式定位它们，但它只是不起作用。这就是我理想的喜欢它们的方式：

主要的问题是'left div'和'right div'具有不同的高度，所以我该如何解决这个问题呢？

编辑：我还想补充一点，左右div需要在内容区域中居中。

Answer 1

如果高度是基于内容的动态，则静态设置其高度或使用javascript匹配它们。

Answer 2

以下是div的HTML，如果您不想将其置于中心位置，请移除#container：

<div id="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="bottom">Bottom</div>
</div>

这是CSS：

#container {
    width: 200px;
    margin: 0 auto;
}

.left {
    float: left;
    width: 100px;
    background: silver;
}

.right {
    float: right;
    width: 100px;
    background: red;
}

.bottom {
    clear: both;
    background: aqua;
}

我只是用颜色来突出位置。您当然可以更改div的宽度，但请记住#container宽度必须是.left + .right的宽度。

阅读this以了解有关浮动的更多信息。 您可以在此处找到代码演示：http://jsfiddle.net/teaJb/

Answer 3

<div id="content">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
    <div class="bottom">
        Bottom
    </div>
</div>

的CSS：

#content{
    width:1000px;
    margin:0 auto;
}

.left{
    width:495px;
    float:left;
    margin-right:10px;
}

.right{
    width:495px;
    float:left;
}

.bottom{
    clear:both;
    margin-top:10px;
}

然后如果你想要左右匹配： （使用jquery）

$(document).ready(function(){
    var leftdiv = $('.left').height();
    var rightdiv = $('.right').height();

    if(leftdiv > rightdiv)
        $('.right').css('height', leftdiv + 'px');
    else
        $('.left').css('height', rightdiv + 'px');
});

Answer 4

将左右div分别浮动到各自的方向。在包含div上设置相同的填充左右。在底部div上应用“clear：both”来清除浮动和“margin：0 auto”以使其相对于容器居中。 如果你不匹配高度，显然底部div将出现在更高的div之后。你可以使用jquery的.height（）方法匹配高度来比较实际高度并为两个div设置更高的值。或者，您可以为常量高度或动态最小高度设置CSS规则。