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

Question

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

6

我有一个类似表格的结构，其中列代表逻辑实体。对于我的使用情况，需要通过在行内流动来视觉分组表格的行。

示例源代码片段：

<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）呈现层进行转换。这有可能吗？

- glts

OP的问题作为一个有效的设计问题相当值得考虑。值得我点赞。 - Rajesh Paul

1

假设你想要一个超级快速的解决方案……你可以像这样复制你的标记（尽管不建议这样做）（我还必须更改ID）。 - Danield

@Danield：这似乎是CSS区域工作的基础，基于我对该模块不太熟悉的理解（当然，它不涉及内容的复制）。 - BoltClock

仅使用CSS无法实现。但是，如果您不想触及源代码，可以考虑通过JS进行转换，以执行类似于@Danield的操作。 - andi

你的内容是否总是在.entities div元素中以单行单词文本形式呈现？ - Marc Audet

显示剩余6条评论

7个回答

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代码，那么答案是不行...

希望这个回答对您有所帮助！

- Anshu Dwibhashi

请勿将其他人已经发布为评论的内容作为“答案”发布。有时这是不可避免的，比如在您发布帖子之前或没有合理的时间看到评论时--但在这种情况下，我相信您会同意20个月的时间差给了您足够的时间，对吧？ - mah

这并没有提供问题的答案。如果您想对作者进行批评或请求澄清，请在他们的帖子下留言。 - mah

@mah 这是我的研究结果：https://dev59.com/OHRB5IYBdhLWcg3w9b99 https://dev59.com/v3E85IYBdhLWcg3wl0nF#2703615 - Anshu Dwibhashi

Anshuman读了问题下面的评论 - 来自@glts：

好吧，你已经可以用这个CSS片段接近了：.entities {display：inline-block;}。问题是是否实际上可以像示例中显示的那样使“行”内联流动。

现在你已经扩展了你的答案，它肯定得到了改善 - 远远超出了你最初发布的内容; 谢谢！ - mah

2

是盒子，所以我不确定你是否能在没有单独为每个单元格的

设置样式的情况下获得所需的对齐方式。我能够最接近地模拟您想要的是通过将class =“heading”附加到每个实体

：

  <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>呢？当然，除非对齐不正确的列边框很重要。

- Kyle

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

只要您大致知道每列所需的宽度，这应该可以正常工作。

- Mike L.

1

也许可以尝试使用带有 clear:left 的 :nth-child()。

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

JSFiddle链接

- Anon

0

你好，请看下面的代码，我认为可以解决你的问题。

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

}

- Bipin Kumar Pal

0

如果我没有直接回答CSS问题，对不起，但我想扩大对HTML结构使用的视角。（无法发布评论）

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

我猜您正在尝试表示实体之间的关系，每行一个关系。但我认为您为此目的构建了一种相当奇特的HTML结构。

我已经就您的HTML代码结构问题进行了一些研究，并制作了一个演示，以展示我的意思："按实体列排列关系行"

我提议的HTML结构是Anshuman上面建议的那个。我重新创建了他提到的结构，但以更实用的方式完成。我还评估了潜在的问题，以及为什么这种结构更适合目的（至少是我从你的数据集中感知到的目的）。在这里看一下：

"按实体行排列的关系行"

- Tim Lind

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

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

然而，如果您需要将每个内容元素放在一条线上，使得每一行不像表格行一样而只是一行方框，就像您所展示的那样，由于CSS中内联格式化的工作方式，这是不可能的。重新安排您的内容以适应这种布局很简单，只需按行而非按列排列内容即可，我相信您已经掌握了这一点，因此我不会深入介绍。

从规范中可以看出：

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

内联格式化上下文通常只能由块容器框生成：

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

在你的结构中，唯一可能的块级容器框由每个 div 生成。因此，第一个 .entities 包含它自己的两个子元素，第二个和第三个同样包含它们自己的子元素。你不能将子元素转移到不同的兄弟包含块中，因此即使你强制所有子元素都使用 display: inline 或将内容元素强制为 display: inline-block，也无法将不同元素的子元素分布在同一行上。

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

另外，针对你奖励声明中的这部分：

CSS 有很多可以改变盒子流和对齐的设备。

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

这可能可以通过CSS regions在一定程度上实现，但我不熟悉该模块，并且目前对它的支持太少，以至于与flexbox相比也不相关。