html - 做一个的身高和别人不相上下

Question

我想创建一个包含 2 divs 的标题。左边div的高度需要和右边的高度相同，但右边的高度可以根据其内容进行缩放。

leftdiv的内容需要垂直对齐到中间。

我试过这样的事情：

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

演示

也总是有仿色（使用背景图像），但这是一种不需要图像的更好方法。

Answer 2

采用display: table-cell;

工作演示

编辑：

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

Answer 3

如果你不介意一点 javascript：

$(document).ready(function() {

  setHeight($('#test1'), $('#test2'));

  // When the window is resized the height might
  // change depending on content. So to be safe
  // we rerun the function
  $(window).on(resize, function() {
      setHeight($('#test1'), $('#test2'));        
  });

});

// sets height of element 1 to equal the height of element 2
function setHeight(elem1, elem2) {
  var height = elem2.height()
  elem1.css('height', height); 
}

演示