Css 具有未知宽度和子元素数的对齐网格

我正在尝试使用未知数量的子元素和未知的宽度来创建一个完全对齐的网格。 每个元素包含一个不同的单词。

中单词之间的空格必须相同

<div class="grid">
    <div>nhdsgf</div>
    <div>sdfghfgjsdf</div>
    <div>xcfgcvb</div>
    <div>dfhhfg</div>
</div>

.grid
{
    font-family:"arial";
    font-size: 12px;
    width:250px;
    padding:10px;
    background:#46d246;
    text-align:justify;
}

.grid > div
{
    display:inline-block;
    padding:3px;
    background: #228f22;
    margin:2px;
    color: #fff;
}

nhdsgf
sdfghfgjsdf
xcfgcvb
dfhhfg
网格
{
字体系列：“arial”；
字体大小：12px；
宽度：250px；
填充：10px；
背景#46d246；
文本对齐：对齐；
}
.grid>div
{
显示：内联块；
填充：3倍；
背景：#228f22；
保证金：2倍；
颜色：#fff；
}

---

下面是一个示例：

这可能是一个使用CSS3的有点不成熟的解决方案，但是如果您添加“font size:0；”对于父div，可以获得更好的结果。它可能会破坏一些旧的浏览器。我建议使用javascript来获得更健壮的结果。我不知道你将要创建什么，但我会看看

---

在没有JavaScript的情况下是无法做到这一点的。

.grid
{
font-family:"arial";
width:250px;
padding:10px;
background:#46d246;
text-align:justify;
font-size:0;
}

.grid > div
{
display:inline-block;
padding:3px;
background: #228f22;
margin:2px;
color: #fff;
font-size: 12px;
}