Html 显示子对象之间的弹性偶数空间，而不考虑子对象的宽度

我有两个相同行组件的实例，它们具有

display:flex

和

justify content:space-between

：

<div class="component-row">
  <div>looooooooooong</div>
  <div>short</div>
  <div>mediummm</div>
</div>

<div class="component-row">
  <div>looooooooooong</div>
  <div>short</div>
  <div>mediummm</div>
</div>

卢昂
短的
中世纪
卢昂
短的
中世纪

---

每个组件的子级之间的间距将不同，因为子级具有不同的宽度。在不更改子对象顺序的情况下，如何确保两个组件实例的每个子对象之间具有相同的空间量？在实例中，空间（例如长和短之间的空间）不必相等-我想要的是两个实例的第一个子和第二个子之间的空间相同，并且两个实例的第二个子和第三个子之间的空间相同。

这听起来很容易解决，但实际上，只需在类上指定一个固定的宽度，然后将其放置在

组件行

子类上

。组件行{
显示器：flex；
证明内容：之间的空间；
}
.eq1{
宽度：30%；
}
.eq2{
宽度：20%；
}
.eq3{
宽度：35%；
}

卢昂
短的
阿达斯达斯达萨德
卢昂
srt
中世纪

这听起来很容易解决，但实际上，只需在类上指定一个固定的宽度，然后将其放置在

组件行

子类中即可

。组件行{
显示器：flex；
证明内容：之间的空间；
}
.eq1{
宽度：30%；
}
.eq2{
宽度：20%；
}
.eq3{
宽度：35%；
}

卢昂
短的
阿达斯达斯达萨德
卢昂
srt
中世纪

最明显的方法是给每个项目一个宽度，尽管如果您不能或不想要，

flexbox

不是最好的解决方案，网格是最好的解决方案

由于

CSS-Grid

缺乏良好的浏览器支持，

CSS-Table

则没有，是完成此任务的最佳选择

。组件容器{
显示：表格；
宽度：计算（100%-40px）；
}
.组件行{
显示：表格行；
}
.组件行div{
位置：相对位置；
显示：表格单元格；
边框：1px纯色灰色；
}
.组件行分区：第n个子项（2）{
左：20px；
}
.组件行分区：第n个子项（3）{
左：40px；
}

卢昂
中世纪
短的
短的
卢昂
中世纪

最明显的方法是给每个项目一个宽度，尽管如果您不能或不想要，

flexbox

不是最好的解决方案，网格是最好的解决方案

由于

CSS-Grid

缺乏良好的浏览器支持，

CSS-Table

则没有，是完成此任务的最佳选择

。组件容器{
显示：表格；
宽度：计算（100%-40px）；
}
.组件行{
显示：表格行；
}
.组件行div{
位置：相对位置；
显示：表格单元格；
边框：1px纯色灰色；
}
.组件行分区：第n个子项（2）{
左：20px；
}
.组件行分区：第n个子项（3）{
左：40px；
}

卢昂
中世纪
短的
短的
卢昂
中世纪

不完全确定您的意思，能否显示所需结果的图像？能否让我知道什么与a给出的答案不符，以便我能够调整并让您接受？不完全确定您的意思，能否显示所需结果的图像？能否让我知道什么与a给出的答案不符，所以我能调整一下，你能接受吗？