如何（以及为什么）使用 display: table-cell (CSS)

Question

我有一个背景 非常 活跃的网站（我在这里说的是 6 个左右不同的 z-indexes 2 和动画）。我想要一个有内容的前景，但想要一个“窗口”通向其中的背景。我遇到的一些问题：

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

   • 我构建了一个包含 div，我们称之为“srminfo”
   • 在里面我有一个“顶部”，“左侧”，“窗口”，“右侧”和“底部”
   • 上、左、右、下都有不透明的白色背景
   • 而 srminfo 和窗口 div 有 background:none;

2. 无论我多么努力，“正确”的 div 都不会填充“顶部”和“底部”div 之间的空间，我尝试了很多不同的东西。它必须是动态的原因是“左侧” div 中的文本是基于背景颜色的动态文本，背景颜色本身是由 JavaScript 随机生成的。

如何显示：表格；以及所有其他相关的 CSS 代码，如表格？以及如何使用它？

原文由 Jim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

经过几天试图找到答案，我终于找到了

显示：表格；

令人惊讶的是，网上几乎没有关于如何真正让它工作的信息，甚至在这里，等等 “如何”：

要使用这段奇妙的代码，您需要回想一下表格是构建 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; }

正如您在下面的示例中看到的那样，第 3 列中的 div 没有内容，但尊重前 2 列中的文本设置的自动高度。赢！

 #table {
    display: table;
    padding: 5px;
}
.tr {
    display: table-row;
    padding: 5px;
}
.td {
    display: table-cell;
    padding: 5px;
    width: 150px;
    border: #000000 solid 1px;
    margin: 5px;
}

 <div id="table">
    <div class="tr">
        <div class="td">Row 1,
            <br />Column 1</div>
        <div class="td">Row 1, Column 2</div>
        <div class="td" style="background:#888888;"></div>
    </div>
    <div class="tr">
        <div class="td">Row 2,
            <br />Column 1</div>
        <div class="td">Row 2, Column 2</div>
        <div class="td" style="background:#888888;"></div>
    </div>
</div>

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

原文由 Jim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 parent > child 选择器关系更容易，因此内部 div 不需要显式定义它们的 css 类：

 .display-table {
    display: table;
}
.display-table > div {
    display: table-row;
}
.display-table > div > div {
    display: table-cell;
    padding: 5px;
}

 <div class="display-table">
    <div>
        <div>0, 0</div>
        <div>0, 1</div>
    </div>
    <div>
        <div>1, 0</div>
        <div>1, 1</div>
    </div>
</div>

原文由 Dmitriy Sintsov 发布，翻译遵循 CC BY-SA 4.0 许可协议