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 table properties复制此布局。）

但是，如果您需要将每个内容元素内联放置，使得每一行不像表格行而不是简单的行框，如图所示，它就是＆＃39;由于CSS中的内联格式化方式，您的结构不可能实现。重新构建您的内容以适应这样的布局就像按行而不是按列排列内容一样简单，我相信您已经涵盖了这些内容，因此我无法进入。

来自spec：

内联级元素是源文档中不构成新内容块的元素;内容以行分布（例如，段落内的强调文本片段，内嵌图像等）。＆＃39;显示＆＃39;以下值property使内联级元素：＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;内联级元素生成内联级框，这些框是参与内联格式化上下文的框。

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

块容器框要么只包含块级框，要么建立内联格式化上下文，因此只包含内联级框。

在您的结构中，每个div都会生成唯一可能的块容器框。因此，第一个.entities包含自己的两个孩子，同样第二个和第三个包含自己的孩子。您不能跨作为兄弟姐妹的不同包含块传递子元素，因此您不能在同一行中分发不同元素的子元素，即使您强制所有元素都为display: inline或者强制内容元素为{{1 }}

请注意，顶级display: inline-block元素也会创建内联格式化上下文，但出于同样的原因，内部元素无法以这种方式使用它。

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

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

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

这个可能在某种程度上可以用CSS regions来实现，但我对这个模块并不熟悉，并且对它的支持太少了无论如何，此时相关（甚至与flexbox相比）。

Answer 2

这个怎么样：

.entities{
display:inline-block;
}

但是这给出了以下格式：

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

如果您需要所需的格式，那么您可能需要稍微更改HTML代码：

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

CSS：

.cell{
display:inline-block;
}

这给出了以下布局：

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

好吧，如果您想使用与您提供的完全相同的HTML，答案是否 ......

你想要的那个，希望它有所帮助！

Answer 3

<div>是方框，因此我不确定您是否能够获得所需的对齐方式，而无需单独设置每个单元格<div>。最近的我可以通过将class="heading"附加到实体<div>来近似您想要的内容：

HTML：

  <div id="entity1" class="heading">
    <div>Ab</div>
    <div>Cdefg</div>
  </div>

CSS：

div.heading {float: left;}
div.heading div {display: block; padding-right: 15px;}

但这仅仅是<div>个元素的表格。

如果要创建类似表格的结构，为什么不使用<table>？当然，除非错位的列边界是必不可少的。

Answer 4

给'单元'的类名以及'行'

<div>
  <div class="row" id="entity1">
    <div class="cell1">Ab</div>
    <div class="cell2">Cdefg</div>
  </div>
</div>

CSS：

.row {position:relative;}
.cell1 {width:33%;}
.cell2 {width:66%;}

这应该有效，只要您对每列所需的宽度有一个大概的了解。

Answer 5

带:nth-child()的Mayby clear:left可以帮助您

.container div:nth-child(4n){clear:left;}

JSFiddle link

Answer 6

很抱歉，如果我没有直接回答css问题，但我想扩大使用html-structure的观点。 （无法发表评论）

我有点困惑 你试图用这种数据和html结构呈现的内容，特别是如果你有更大的数据集。 / em>因为在这种情况下PHP + / SQL会对你有很大帮助，如上面的评论中所述。

我要求你试图在每一行上代表实体，1个关系之间的关系。但是我会说你已经为了这个目的以一种相当特殊的方式构建了你的HTML。

我已经对你的html代码所带来的问题进行了一些研究，并且我做了一个小提示，告诉你我的意思："Relation-rows by entity-columns"

我建议的html结构是Anshuman suggested above。我重新创建了他提到的结构，但是以更务实的方式完成了它。我还评估了潜在的问题，以及为什么这种结构更适合这个目的。（至少是我从你的数据集中看到的目的。）在这里看看它： "Relation-rows by entity-rows"

Answer 7

嗨，请流动吹响代码，我的事情解决你的问题

.entities{
display: inline;
float: left;
position: relative;
clear: right;

}

带有纯CSS的内联<div>列元素</div>

7 个答案: