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

【问题标题】：Inline <div> column elements with pure CSS使用纯 CSS 内联 <div> 列元素
【发布时间】：2012-03-15 22:06:58
【问题描述】：

我有一个类似表格的结构，其中的列代表逻辑实体。对于我的用例，需要在视觉上对表 rows 进行分组，最好将它们内联。

示例源片段：

<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）表示层上进行转换。有可能吗？

【问题讨论】：

将 php 添加到脚本中会更好，这是我的选择。您可以在循环中使用循环，您将能够应用 CSS 规则..这是一个好主意..
好吧，你已经可以非常接近这个 CSS 片段了：.entities { display: inline-block; }。问题是是否真的可以使“行”如示例中所示内联流动。
不知道为什么会有 2 票反对。对我来说这似乎很清楚，如果之前投反对票，那么这个问题在第一次被问到时似乎也没有那么糟糕。
OP 的问题作为一个有效的设计问题是相当可观的。值得我点赞。
假设你想要一个超级快速的修复..你可以复制你的标记（虽然不推荐），比如this（我也必须更改 ID）

标签： html css dom

【解决方案1】：

给出“单元格”类名称以及“行”

<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%;}

只要您大致了解每列所需的宽度，这应该可以。

【讨论】：

【解决方案2】：

<div>s 是框，所以我不确定您是否能够在不单独设置每个单元格 <div> 的情况下获得所需的对齐方式。我可以近似你想要的最接近的是将class="heading"附加到实体<div>s：

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>？当然，除非未对齐的列边框是必不可少的。

【讨论】：

【解决方案3】：

这个怎么样：

.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，答案是 no...

正是你想要的，希望对你有帮助！

【讨论】：

请不要将其他人已作为评论发布的内容发布为“答案”。有时这是不可避免的，例如当您在评论发布之前开始发帖时，或者没有合理的时间来查看该评论 - 但在这种情况下，我相信您会同意 20 个月的时间间隔给了你有很多时间，不是吗？
这并没有提供问题的答案。要批评或要求作者澄清，请在其帖子下方发表评论。
@mah 这是我的研究：stackoverflow.com/questions/450903/…stackoverflow.com/questions/2703601/…
Anshuman 阅读了问题下的 cmets——来自@glts 的那个：Well, you can already get quite close with this CSS fragment: .entities { display: inline-block; }. The question is if it's actually possible to make the "rows" flow inline as shown in the example.。现在您已经扩展了答案，它肯定得到了改进——远远超出了您最初发布的内容；谢谢！

【解决方案4】：

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

但是，如果您需要将每个内容元素内联放置，以使每一行不像表格行而不是简单的行框，如图所示，这是不可能的由于内联格式在 CSS 中的工作方式，您给定的结构。重构您的内容以适应这种布局就像按行而不是按列排列内容一样简单，我相信您已经介绍过，所以我不会深入探讨。

来自spec：

行内元素是源文档中不形成新内容块的元素；内容按行分布（例如，段落中强调的文本片段、内嵌图像等）。 'display' 属性的以下值使元素成为内联级别：'inline'、'inline-table' 和 'inline-block'。内联级元素生成内联级框，它们是参与内联格式化上下文的框。

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

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

在您的结构中，唯一可能的块容器框由每个 div 生成。所以第一个.entities 包含它自己的两个孩子，第二个和第三个也是他们自己的孩子。您不能在作为兄弟的不同包含块之间传输子元素，因此您不能将不同元素的子元素分布在同一行中，即使您将它们全部强制为display: inline 或者如果您将内容元素强制为display: inline-block。

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

另外，为了解决您的赏金声明的这一部分：

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

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

这可能在一定程度上可以使用CSS regions，但我不熟悉那个模块，而且目前支持它的相关性太少（即使比较到弹性盒）。

【讨论】：

我不知道 CSS 区域。谢谢。

【解决方案5】：

对不起，如果我没有直接回答 css 问题，但我想拓宽使用 html 结构的视角。 （不能发布 cmets）

我有点困惑 你试图用这种数据和 html 结构呈现什么，特别是如果你有更大的数据集。因为 PHP+/SQL 在这种情况下会为您带来很多好处，正如上面的评论中所述。

我怀疑您是否试图表示实体之间的关系，每行有 1 个关系。但我会说您为此目的以一种相当特殊的方式构建了您的 html。

我已经对您的 html 代码所具有的结构问题进行了一些研究，并且我做了一个小提琴来向您展示我的意思：@987654321@

我建议的html结构是Anshuman suggested above。我重新创建了他提到的结构，但以更实用的方式完成了它。我还评估了潜在问题以及为什么这种结构更适合目的。（至少我从您的数据集中了解到的目的。）在这里看一下： @987654323@

【讨论】：

【解决方案6】：

Mayby :nth-child() 和 clear:left 可以帮助你

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

JSFiddle link

【讨论】：

【解决方案7】：

嗨，请流吹代码，我的东西解决你的问题

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

}

【讨论】：