Question

我正在尝试使用display:table-cell创建两个相同高度的列，然后在前两列的顶部放置第三个相同高度的叠加div以隐藏它们。两个相同高度的列工作。但我无法弄清楚如何使第三个div与前两个相同的高度， AND 位于它们之上。

目标：

第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，因此在大多数浏览器中都应该如此。

如何进行显示：table-cell div cover毗邻table-cell divs？

1 个答案: