如何進行顯示：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？

回答

相關問題