html – 如何均匀地排列多个内嵌块元素？

概述是否可以均匀地放置宽度可变的div中的许多元素。 这是not working example.如果我们使用text-align：center;元素将居中，但边距：0自动;不管用。我想完成一些像对齐中心的东西： |..<elem>..<elem>..<elem>..<elem>..| // for one container width|..<elem>..<elem>..<elem> 是否可以均匀地放置宽度可变的div中的许多元素。

这是not working example.如果我们使用text-align：center;元素将居中，但边距：0自动;不管用。我想完成一些像对齐中心的东西：

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

解决方法 我最近读了一个非常聪明的技巧来完成你所要求的工作。

简而言之，你只需要使用text-align：justify;在容器元素上实现这一点，结合一个额外的不可见块。

这是因为内联块元素被视为文本内容的一部分，每个元素实际上是单个单词。

使用对齐方式将展开文本中的单词，以便它们填充元素的整个宽度，并在单词之间增加空格。对于内联块元素，这意味着它们之间具有均匀间隔。

最后我提到一个额外的看不见的块。这是必需的，因为正常的text-align：对齐不会证明最后一行文本。对于正常文本，这正是你想要的，但是为了对齐内嵌框框，你希望它们都对齐。

解决方案是将额外的不可见但100％的宽度元素添加到内联块元素列表的末尾。这将成为文本的最后一行，因此，正当的技术将适用于其余的块。

您可以使用：after pseudo-selector来创建不可见元素，而无需修改标记。

这是您的Jsfiddle的更新版本来演示：http://jsfiddle.net/ULQwf/298/

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

[编辑]
查看您添加到该问题的图片后，最后一次更新。 (我没有一个更好的答案，但一些额外的想法可能是有用的)。

理想情况下，您需要的是一个最后一行选择器。然后你可以文本对齐：对齐主文本和text-align：居中的最后一行。那会做你想要的

可悲的是，最后一行不是一个有效的选择器((第一行是但不是最后一行)，所以这是想法的结束。

更有希望的思想是text-align-last，它作为一个特征确实存在。这可以完全符合你想要的：

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

完善。

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

你可以read about here on MDN。

我认为最后的手段可能是您的选择，如果您只能支持部分浏览器支持。至少会得到你想要的一些用户。但这并不是一个明智的做法。

我的直觉是，尽可能接近你要得到的。非常贴近您想要的，但不完全相同。我希望我被证明是错误的，但我会感到惊讶。太糟糕了，因为我似乎是一个完美的逻辑的事情要做。

总结

以上是内存溢出为你收集整理的html – 如何均匀地排列多个内嵌块元素？全部内容，希望文章能够帮你解决html – 如何均匀地排列多个内嵌块元素？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。