html - 如何(以及为什么)使用显示 : table-cell (CSS)

Question

我有一个网站的背景非常活跃(我在这里说的是 6 个左右不同的 z-index 2 和动画)。我想要一个在前景中有内容但想要一个“窗口”通过它的背景。我遇到的一些问题:

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

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

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

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

Answer 1

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

display: table;

令人惊讶的是，关于如何实际让它工作的在线信息非常少，即使在这里，关于“如何”:

要使用这段奇妙的代码，您需要回想一下何时表格是构建 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)，因此根据您对浏览器兼容性的需求，这可能不是您正在寻找的答案。