Question

我正在尝试使用未知数量的子元素和未知宽度来做一个完美对齐的网格。每个元素都包含不同的单词。 <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;
}

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

1 个答案: