Html 使最长的内容项设置整个列的宽度

正如您在我应用于这个问题的代码片段中所看到的，对齐被破坏了，因为不同的div根据其内部的文本具有不同的宽度

我希望每个列的最大div的宽度由其内部文本的长度决定，并让所有其他div采用该宽度。我不想硬编码任何宽度，也不能太多地修改HTML结构

我希望最终结果是这样的：

有什么可以做的吗

.match{
显示器：flex；
}
.居中对齐{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.匹配容器分区{
右边距：20px；
填充：10px；
}
.匹配：第n个孩子（奇数）{
背景色：#D0；
}
.匹配：第n个孩子（偶数）{
背景色：#e4b2b2；
}

乔治

第10级

护林员

米娅

第10级

护林员

伊万

9999级

巫师

将css更改为以下内容。无论如何，宽度不会超过33%，即使你把宽度：50%，但指定宽度将解决你的问题。我还删除了justify content:center，以确保它将向左对齐

.justify-center {
    display: flex;
    align-items: center;
    width: 33%;
    text-align: left;
}

主容器（

.matches container

）有三个弹性项（

.match

）

这些项目可以设置为跟踪彼此的宽度，因为它们是兄弟项目。它们之间有着直接的联系，因为它们共享同一个父对象

但是，您要针对的div（

.justify center

）是项（

.match

）的后代，使它们成为近亲，这意味着它们没有直接关联，也没有用于相对大小调整的自然CSS解决方案

因此，除非您希望使所有内容项成为同级，或者使用表或JavaScript，否则无法让一行中的内容项设置其他行中内容项的宽度

更多信息：

---

您可以尝试更改CSS：

。匹配容器{
显示器：flex；
}
.居中对齐{
对齐项目：居中；
填充：10px；
}
.匹配分区：第n个子项（奇数）{
背景色：#D0；
}
.match div:n个子项（偶数）{
背景色：#e4b2b2；
}
.比赛{
调整内容：灵活启动；
}

乔治

米娅

伊万

第10级

第10级

9999级

护林员

护林员

巫师

如果您确实想要定义列宽的子元素，并且想要相同的标记，那么您必须将

显示

属性切换到表值，然后单击flexbox

如果您显示的是表格数据，并且确实是这样显示的，那么可以使用

。匹配容器{
显示：表格；
}
.比赛{
显示：表格行；
}
.match>div{
显示：表格单元格；
}
.居中对齐{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.匹配容器分区{
右边距：20px；
填充：10px；
}
.匹配：第n个孩子（奇数）{
背景色：#D0；
}
.匹配：第n个孩子（偶数）{
背景色：#e4b2b2；
}

乔治

第10级

护林员

米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚米亚

第10级

护林员

伊万

9999级

巫师

在表中显示数据是最简单的解决方案

td{
填充：1勒姆
}

乔治
第10级
护林员
米娅
第10级
护林员
伊凡
9999级
男巫

可能不知道您在寻找什么，但一个表就达到了这个标准。也许值得指出的是，您重新安排了数据输出的位置/方式。这是您的解决方案有效的一个重要原因。另外，

start

不是

flex direction

的正确值。我假设它应该是

列

。由于它无效且不做任何事情，因此可以从解决方案中省略

flex direction

。