Question

我正在使用div的

在html中构建一个简单的2列布局

问题在于我无法让right列与left具有相同的高度。

<div id="container">

    <div id="left" style="float: left; width: 200px; background: #DDFFDD;">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>

    <div id="right" style="float: left; width: 600px; background: #DDDDFF">
        <p>main</p>
    </div>
</div>

如您所见，右列与左侧列的高度不匹配。我希望他们是平等的

修改：我们无法知道高度，因为列内的内容将是动态的。 left或main中的内容可以是最大高度。

Answer 1

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

这个网站有一个非常好的解释，我发现很难平等或顶尖。

祝你好运！

Answer 2

我主张使用table进行此练习，但这是一个不同的辩论。

您是否尝试过设置div的height？

Answer 3

如果你只想让它们具有相同的高度，那么就明确声明它。如果你希望它们能够扩展并且最高的一个确定两者的高度，那么请重新提出问题。

只需将以下内容添加到两个样式标记

即可

style="height: 500px;"

CSS 2列布局：列高

3 个答案: