如何制作显示：table-cell div 覆盖相邻的 table-cell div？

Question

我正在尝试使用display:table-cell 创建两个高度相同的列，然后在前两列的顶部放置第三个高度相同的覆盖 div 以隐藏它们。两个相同高度的柱子起作用。但我不知道如何使第三个 div 与前两个高度相同，并且在它们之上。

目标：

• 第 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; 
}

Answer 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，因此在大多数浏览器中应该差不多。