让一个<div>的高度与另一个高度相匹配

Question

我想创建一个包含2 div秒的标头.左边div需要与右边相同,但右边可以根据内容进行缩放.

左边div的内容需要垂直对齐到中间.

我试过这样的事情:

<header>
    <div id="test1">
        <div>LOGO</div>
    </div>
    <div id="test2">
        <h1>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</h1>
    </div>
</header>

Answer 1

你可以使用溢出,填充和边距伪造它.它完全兼容浏览器,不需要任何JavaScript或任何东西.只是CSS.例如:

.header {
    overflow: hidden;     
}

.test {
    background: red;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
    float: left;
    width: 100px;
    margin-right: 20px;
}?

DEMO

也总是有人造cols(使用背景图片),但这是一种不需要图像的更好的方法.

Answer 2

用 display: table-cell;

工作演示

编辑：

如果你想要jQuery 解决方案，它适用于所有浏览器