如何（以及为什么）使用display：table-cell（CSS） [英] How (and why) to use display: table-cell (CSS)

问题描述

我有一个拥有非常活动背景的网站（我在这里用动画说了大约6个不同的z-索引）。我想在前台有一个内容，但想要一个窗口直到它的背景。我遇到的一些问题：

1. 你不能在背景中打洞，所以...

   
   
   
   
   
   • 我构建了一个包含div的程序，我们称之为srminfo
   
   
   • ，左，窗口，右和底部
     
   • 顶部，左侧，右侧，底部都有不透明的白色背景
   
   
   • 而srminfo和窗口div有background：none;
     
   
   

   • 无论我多么努力，rightdiv不会填补顶部和底部之间的空白，我尝试了很多不同的东西。它必须是动态的原因是，左div中的文本是基于背景颜色的动态，而背景颜色本身是通过JavaScript随机生成的。

   
   

display：table;和所有其他相关的CSS代码如表？那么如何使用它？

解决方案

经过几天的努力寻找答案，我终于找到了

显示：表格

关于如何真正实现它的工作，甚至在这里，到How如何：

要使用这段梦幻般的代码，你需要回想一下，何时表格是构成HTML的唯一真正方法，即语法。要获得一个2行3列的表格，您必须执行以下操作：

 < table> 
< tr> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< / tr> 
< tr> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< / tr> 
< / table> 
  

与CSS类似，您可以使用以下代码：

HTML

 < div id =table> 
< div class =tr> 
< div class =td>< / div> 
< div class =td>< / div> 
< div class =td>< / div> 
< / div> 
< div class =tr> 
< div class =td>< / div> 
< div class =td>< / div> 
< div class =td>< / div> 
< / div> 
< / div> 
  

CSS

  #table {
 display：table; 
} 
 .tr {
 display：table-row; 
} 
 .td {
 display：table-cell; } 
  

正如您在下面的JSFiddle示例中看到的，第3列中的div没有内容，而是尊重前两栏文字设置的自动高度。 WIN！

http://jsfiddle.net / blyzz / 1djs97yv / 1 /

值得注意的是 display：table; 不起作用在IE6或7（感谢，FelipeAls ）中，所以根据您对浏览器兼容性的需求，这可能不是您正在寻求的答案。

I have a site with a very active background (I'm talking 6 or so different z-indexes here 2 with animations). I wanted a in the foreground that had content but wanted a "window" through to the background in it. Some problems I had:

1. you can't "punch a hole" in a background, so...

   • I built a containing div, lets call it "srminfo"
   • Inside that I had a "top", "left", "window", "right" and "bottom"
   • the top, left, right, bottom all had opaque white backgrounds
   • while the srminfo and window divs had background:none;

2. No matter how hard I tried, the "right" div wouldn't fill the space between the "top" and "bottom" divs, I tried a lot of different things. The reason it had to be dynamic is that the text in the "left" div was dynamic based on the background colour, which was itself generated randomly with JavaScript.

How is display: table; and all the other related CSS code like tables? And how can it be used?

解决方案

After days trying to find the answer, I finally found

display: table;

There was surprisingly very little information available online about how to actually getting it to work, even here, so on to the "How":

To use this fantastic piece of code, you need to think back to when tables were the only real way to structure HTML, namely the syntax. To get a table with 2 rows and 3 columns, you'd have to do the following:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Similarly to get CSS to do it, you'd use the following:

HTML

<div id="table">
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
</div>

CSS

#table{ 
    display: table; 
}
.tr{ 
    display: table-row; 
}
.td{ 
    display: table-cell; }

As you can see in the JSFiddle example below, the divs in the 3rd column have no content, yet are respecting the auto height set by the text in the first 2 columns. WIN!

http://jsfiddle.net/blyzz/1djs97yv/1/

It's worth noting that display: table; does not work in IE6 or 7 (thanks, FelipeAls), so depending on your needs with regards to browser compatibility, this may not be the answer that you are seeking.

这篇关于如何（以及为什么）使用display：table-cell（CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！