使用纯CSS的内联<div>列元素

Question

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

示例源片段:

<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)表示层上进行转换.它可能吗？

Answer 1

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

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

从规格:

内联级元素是源文档中不构成新内容块的元素; 内容以行分布(例如,段落内的强调文本片段,内嵌图像等).'display'属性的以下值使元素成为内联级别:'inline','inline-table'和'inline-block'.内联级元素生成内联级框,这些框是参与内联格式上下文的框.

一个内联格式化内容通常只能由生成块容器箱:

阿块容器箱要么只包含块级盒或建立一个内联格式化内容,因而只包含行内框.

在您的结构中,每个都会生成唯一可能的块容器框div.所以第一个.entities包含自己的两个孩子,同样第二个和第三个包含自己的孩子.您不能在作为兄弟节点的不同包含块之间传递子元素,因此您不能在同一行中分发不同元素的子元素,即使您强制执行所有display: inline元素或者强制使用内容元素也是如此display: inline-block.

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

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

CSS确实有很多设备可以改变盒子的流量和对齐方式.

不幸的是,即使使用flexbox也是不可能的,因为flex容器的工作方式类似于块容器,因此受到与上面描述的内联级后代相同的限制.

这在CSS区域可能在某种程度上是可行的,但是我对这个模块并不熟悉,而且此时对它的支持太少了(甚至与flexbox相比).