html – 具有纯CSS的内联列元素

HTML 2019-05-09

我有一个类似于表的结构,其中列表示逻辑实体.对于我的用例,它是需要在视觉上分组的表行,最好是通过内联流动.

示例源片段：

<div>
  <div id="entity1" class="entities">
    <div>Ab</div>
    <div>Cdefg</div>
  </div>
  <div id="entity2" class="entities">
    <div>98224</div>
    <div>511</div>
  </div>
  <div id="entity3" class="entities">
    <div>αβγδ</div>
    <div>ε</div>
  </div>
</div>

所需的布局：

+----+-------+------+
| Ab | 98224 | αβγδ |
+----+--+----++---+-+
| Cdefg | 511 | ε |
+-------+-----+---+

当然,很容易在服务器端转换文档纯粹是为了演示,但我想知道我是否可以保持文档层次结构并在(CSS)表示层上进行转换.它可能吗？

解决方法

正如您的评论和其他答案中所提到的,将整个.entities元素作为内联块放置或浮动它们以便将它们的内容排成行,类似于正确的表格是微不足道的. (具有讽刺意味的是,您无法使用 CSS2.1 table properties复制此布局.)

但是,如果您需要将每个内容元素内联放置,使得每行不像表行而不是简单的一行框,如图所示,由于内联格式化工作的方式,您的结构不可能在CSS中.重新构建内容以适应这样的布局就像按行而不是按列排列内容一样简单,我相信你已经覆盖了所以我不会深入研究.

从spec开始：

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g.,emphasized pieces of text within a paragraph,inline images,etc.). The following values of the ‘display’ property make an element inline-level: ‘inline’,‘inline-table’,and ‘inline-block’. Inline-level elements generate inline-level Boxes,which are Boxes that participate in an inline formatting context.

inline formatting context通常只能由block container box 生成：

A block container Box either contains only block-level Boxes or establishes an inline formatting context and thus contains only inline-level Boxes.

在您的结构中,每个div都会生成唯一可能的块容器框.因此,第一个.entities包含自己的两个孩子,同样为他们自己的孩子的第二个和第三个.您不能在作为兄弟的不同包含块之间传递子元素,因此您不能在同一行中分发不同元素的子元素,即使您强制显示所有元素：内联或强制显示内容元素：inline-block .

请注意,顶级div元素也会创建内联格式化上下文,但出于同样的原因,内部元素不能以这种方式使用它.

另外,要解决这部分赏金声明：