Question

我想在其中创建一个包含2 div个标头的标头。左div需要与右边的div高度相同，但是右边的<header> <div id="test1"> <div>LOGO</div> </div> <div id="test2"> <h1>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</h1> </div> </header>可以根据其内容进行缩放。

左{{1}}的内容需要垂直对齐到中间。

我试过这样的事情：

{{1}}

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;

Working Demo

编辑：

如果您希望jQuery Solution适用于所有浏览器

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

<强> DEMO

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

3 个答案: