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

Question

我正在尝试使用未知数量的子元素和未知宽度来做一个完美的对齐网格。每个元素都包含一个不同的单词。in 单词之间的空格<div></div>必须相同。

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

这是示例：http: //jsfiddle.net/CeBdP/

Answer 1

这可能是一个使用 CSS3 的 hacky 解决方案，但是如果你添加 'font-size:0;' 到父div，你可以获得更好的结果。它可能会破坏一些较旧的浏览器。我建议使用 javascript 来获得更强大的结果。我不确定你要创建什么，但我会看看http://masonry.desandro.com

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