2

を使用して 2 つの同じ高さの列を作成しdisplay:table-cell、最初の 2 つの列の上に 3 つ目の同じ高さのオーバーレイ div を配置して非表示にしようとしています。同じ高さの 2 つの支柱が機能します。しかし、3番目のdivを最初の2つと同じ高さにし、それらの上に置く方法がわかりません。

目標:

  • 列 1 と 2 は常に同じ高さでなければなりません。高さを明示的に設定することはできません。両方とも、列の内容に基づいて高さが高い方の列の高さを取る必要があります。
  • カバーは、明示的に設定するのではなく、カバーする行の正確な高さと幅でなければなりません。
  • JavaScript を使用しないソリューションを探しています。

次のフィドルを参照してください: http://jsfiddle.net/rEAYb/1/

HTML

Some filler content that should not be covered.
<div class="Table">
    <div class="Row">
        <div class="Cell Left">
            Left<br/>
            sdfgsdfg<br/>
            sdfgsd<br/>
            fgsdfg<br/>
            sdfg<br/>
            dsfgsdfg<br/>
            sdfgsdfgdsfg<br/>
        </div>
        <div class="Cell Right">Right</div>
        <div class="Cell Cover">&nbsp;</div>
    </div>
</div>
Some filler content that should not be covered.

CSS

.Table{
    display:table;
}

.Row{
   display: table-row;
    position:relative;
}

div.Cell{
    padding:18px;
    padding-bottom:60px;
    padding-top:40px;
    width:480px;
    display: table-cell;    
}

div.Cover{
    background:#444;
    opacity:.5;
    position:absolute;
    top:0px;
    left:0px;
}

div.Left{
   background:green; 
}

div.Right{
   background:blue; 
}
4

1 に答える 1

1

次のようにして、必要な効果を得ることができます。

まず、HTML を次のように変更します。

<div class="Cover"></div>

オーバーレイは単純なブロック要素になる可能性があるため、.Cellクラスを削除します。.Cover要素は空のままにすることができることに注意してください。

CSS は次のように調整する必要があります。

.Table {
    display:table;
    position:relative;
}
.Row {
    display: table-row;
}

div.Cover {
    background:#444;
    opacity: 0.9;
    position:absolute;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
}

の代わりに適用position: relativeします。.Table.Row

div.coverで、下と右に追加のボックス オフセットを追加します。

フィドル: http://jsfiddle.net/audetwebdesign/pyxaN/

このポジショニングは CSS 2.1 に依存しているため、ほとんどのブラウザではほぼ同じです。

于 2013-05-29T10:53:34.327 に答える