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

我试图创建一个使用display:table-cell两个相同高度的列，然后将第三个相同的高度覆盖DIV了前两列的顶部隐藏它们。两个相同高度的柱子工作。但我无法弄清楚如何使第三格的高度相同的前两个，和是在它们上面。如何进行显示：table-cell div cover毗连table-cell divs？

目标：

列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; 
}

来源

2013-05-29 Nick

这个问题可能是有趣的，它使用Flexbox来实现同样的事情：http://stackoverflow.com/q/16109687/1652962 – cimmanon

你可以得到的效果要如下：

首先，改变的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-29 10:53:34

+1这比我提出的要好得多。 –

如果每个'table-row' div都包含在它自己独立的'table' div中，但是如果你有一个'table' div和多个'table-row' div，封面会阻止整个表格，而不是只有一行。例如：http://jsfiddle.net/pyxaN/8/ – Nick

您可以按如下方式调整解决方案：http://jsfiddle.net/audetwebdesign/pyxaN/9/将'display：table'应用于'.Row' '.Table'并添加一个新类'.noCover'来切换哪些行被覆盖。 –

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

回答

相关问题