如何均匀分布许多行内块元素？

Question

是否可以在一个宽度可变的 div 中均匀分布多个元素。

这里是not working example。如果我们使用 text-align:center;元素将居中，但 margin:0 auto;不管用。我想完成类似 justify+center 之类的事情：

|..<elem>..<elem>..<elem>..<elem>..|       // for one container width
|..<elem>..<elem>..<elem>..|               // for smaller container width
|....<elem>....<elem>....|                 // even smaller container

容器的大小可以由用户调整。 一张图抵一千字：

容器（红框）宽度：100%；所以用户可以调整它的大小（浏览器窗口、js 等等）。
表示偶数空格。 第二排 更大，因为有更多空间。我可以通过以下方式伪造它：

text-align:center;
word-spacing:3em;    // but any fixed value looses proportion

Answer 1

我最近读到了一种非常聪明的技术，可以完全按照您的要求进行操作。

简而言之，您只需在容器元素上使用text-align:justify; 即可实现这一点，并在末尾加上一个额外的不可见块。

之所以有效，是因为 inline-block 元素被视为文本内容的一部分，每个元素实际上都是一个单词。

使用justify 将分散文本中的单词，使它们填满元素的整个宽度，并在单词之间留出额外的空间。对于inline-block 元素，这意味着它们之间的间隔是偶数。

我在最后提到了一个额外的隐形方块。这是必需的，因为普通的text-align:justify 不会证明最后一行文本。对于普通文本，这正是您想要的，但对于对齐 inline-block 框，您希望它们全部对齐。

解决方案是在inline-block 元素列表的末尾添加一个额外的不可见但 100% 宽度的元素。这实际上将成为文本的最后一行，因此justify 技术将适用于您的其余块。

您可以使用:after 伪选择器来创建不可见元素，而无需修改您的标记。

这里有一个更新版本的 jsFiddle 来演示：http://jsfiddle.net/ULQwf/298/

这里是更详细解释它的原始文章：http://www.barrelny.com/blog/text-align-justify-and-rwd/

[编辑] 看到您添加到问题中的图像后的最后一次更新。 （我没有更好的答案，但还有一些可能有用的想法）。

理想情况下，您需要的是 :last-line 选择器。然后你可以text-align:justify 正文和text-align:center 最后一行。那会做你想做的。

很遗憾，:last-line 不是一个有效的选择器（:first-line 是，但不是 :last-line），所以这个想法就结束了。

一个更有希望的想法是text-align-last，它确实作为一个特性存在。这完全可以满足您的需求：

text-align:justify;
text-align-last:center;

完美。

除了它是非标准的并且对浏览器的支持非常有限。

你可以read about here on MDN。

我想作为最后的手段，如果您只能接受部分浏览器支持，它可能是您的选择。它至少会为您的一些用户提供您想要的东西。但这并不是一个明智的选择。

不过，我的直觉是，这与您将要获得的一样接近。诱人地接近你想要的，但并不完全在那里。我希望我被证明是错的，但我会感到惊讶。不过太糟糕了，因为我想做的事情似乎完全合乎逻辑。

Answer 2

我研究了你的例子，你必须组合块/内联样式，因为单独的 justify 只适用于内联（文本）。

div{
    width:530px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
    border:1px red solid;
    text-align:justify;    /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */

}
div span{ /* I worked with your example you may use a class */
    width:60px;
    border:1px yellow solid;
    display: inline-block; /* Inline-block */ 
    position: relative; /* relative to container div*/
}

div:before{
    content: ''; /* position for block element*/
    display: block; /* the block part for the last item*/
    width: 100%;
}

div:after {
    content: '';
    display: inline-block; /* inline-block for the first (and middle elements) */
    width: 100%;
}

Answer 3

如果尝试不同的方法，小提琴看起来与图片非常相似，但两行中的空间是固定的，但元素是插入的。

div{
    width:250px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
    border:1px red solid;
    text-align:center;    /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */
}
div span{ /* I worked with your example you may use a class */
    width:60px;
    float:justify;
    border:1px yellow solid;
    display: inline-block; /* Inline-block */ 
      margin-left:2%;
    margin-right:2%;

}