2

我正在尝试使用 创建两个相同高度的列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; 
}
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 回答