3

2秒のヘッダーを作成したいdiv。左側divは右側と同じ高さである必要がありますが、右側はその内容に基づいて拡大縮小できます。

左divのコンテンツは、中央に垂直に配置する必要があります。

私はこのようなことを試みました：

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

3 に答える 3

5

オーバーフロー、パディング、マージンを使用してこれを偽造できます。これは完全にクロス ブラウザ互換であり、JavaScript などは一切必要ありません。ただのCSS。例えば：

.header {
    overflow: hidden;     
}

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

デモ

偽の列 (背景画像を使用) も常にありますが、これは画像を必要としないより優れた方法です。

于 2012-10-16T10:31:13.297 に答える
5

使用するdisplay: table-cell;

ワーキングデモ

編集：

jQuery ソリューションが必要な場合は、すべてのブラウザで動作します

于 2012-10-16T10:39:02.373 に答える
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); 
}

デモ

于 2012-10-16T10:47:07.487 に答える