示例源片段：
<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)表示层上进行转换.它可能吗？
解决方法
但是,如果您需要将每个内容元素内联放置,使得每行不像表行而不是简单的一行框,如图所示,由于内联格式化工作的方式,您的结构不可能在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元素也会创建内联格式化上下文,但出于同样的原因,内部元素不能以这种方式使用它.
另外,要解决这部分赏金声明：
CSS does have quite a few devices that alter the flow and alignment of Boxes.
遗憾的是,即使使用flexbox也是不可能的,因为柔性容器与块容器的工作方式类似,因此受到与上面描述的内联级后代相同的限制.
这在CSS regions可能在某种程度上是可行的,但是我对这个模块并不熟悉,而且此时对它的支持太少了(甚至与flexBox相比).
