CSS 中'display: table-column”的真正目的是什么？

解开CSS“display: table-column”之谜

对 HTML 和 CSS 属性的探索常常会带来有趣的问题。当使用神秘的“display: table-column”声明实现 CSS 基于表格的布局时，就会出现这样的一个查询。尽管它很有吸引力，但这个属性有一个相当特定的用途，如果不能正确理解，可能会导致令人费解的结果。

背景：CSS 表模型

CSS 表model 是一个复杂的系统，大量借鉴了 HTML 表模型。在此模型中，表格由行和列组成，单元格占据行和列的每个交叉点。虽然单元格是行的直接后代，但它们与列没有直接关系。

“display: table-column”的目的

与普遍的看法相反，“ display: table-column”属性不提供创建柱状布局的方法。其唯一目的是定义专门应用于表行中的单元格的属性。换句话说，它允许我们根据特定单元格在行中的位置指定背景颜色或字体大小等特征。

但是，需要注意的是，表格结构与传统的表格结构保持不变。 HTML。栏目不直接包含内容；相反，它们仅作为影响行内单元格布局的逻辑结构而存在。

说明性示例

考虑以下 HTML 和 CSS 代码：

<code class="html"><section>
  <div id="colLeft">
    <div id="row1">
      <div id="cell1">AAA</div>
    </div>
    <div id="row2">
      <div id="cell2">BBB</div>
    </div>
  </div>
  <div id="colRight">
    <div id="row3">
      <div id="cell3">CCC</div>
    </div>
  </div>
</section></code>

<code class="css">section {
  display: table;
  height: 100%;
  background-color: grey;
}

#colLeft,
#colRight {
  display: table-column;
  height: 100%;
}

#row1,
#row2,
#row3 {
  display: table-row;
  height: 100%;
}

#cell1,
#cell2,
#cell3 {
  display: table-cell;
  height: 100%;
}</code>

在此示例中，“display: table-column”声明应用于“colLeft”和“colRight”元素。这些元素不包含任何内容；它们的唯一目的是定义各自行中单元格的布局。

尽管存在这些列定义，您可能会注意到浏览器中没有显示任何内容。这是因为，如前所述，列不直接包含内容。内容必须放置在表格单元格内，表格单元格是表格行的子项。

为了解决这个问题，我们需要修改 HTML 结构以将内容放置在表格单元格内：

<code class="html"><section>
  <div id="colLeft">
    <div id="row1">
      <div id="cell1">AAA</div>
    </div>
    <div id="row2">
      <div id="cell2">BBB</div>
    </div>
  </div>
  <div id="colRight">
    <div id="row3">
      <div id="cell3">CCC</div>
    </div>
  </div>
</section></code>

有了这个修改后，内容按预期显示，演示了“display: table-column”的正确使用。

以上是CSS 中'display: table-column”的真正目的是什么？的详细内容。更多信息请关注PHP中文网其他相关文章！