を使用して 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"> </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;
}