如何划分所有边距但最后均匀空间？

Posted 2023-03-06

【中文标题】如何划分所有边距但最后均匀空间？

【英文标题】：How do I divide all margins but last to even out space?

【发布时间】：2012-08-13 12:15:54

【问题描述】：

问题是我们的网站上会有很多不同的语言，动态文本长度未知。我需要将所有内容都居中，但无需像这样手动为每个区域添加右边距。如果它可以进行某种类型的 jQuery 计算并使其每次看起来都像这样但自动完成，那就太好了： Click here to see my CSS example

我尝试修改this jQuery script I found，但我失败了，你可以在此处看到 jsfiddle.net/UTaSg/86/ 如果它没有为最后一个孩子添加额外的宽度（右侧没有空格），这可能会起作用“类型：所有独奏乐队”）。

我不知道如何做到这一点，任何帮助将不胜感激。提前感谢您的帮助！如果可能，请使用示例。

在 990px​​ 的容器中总是会有这 4 个过滤器，我想在所有不同语言的末端保留 25px 的空间。所以它们的文本长度会略有变化，我希望 3 个过滤器空间之间的空间相等。

【问题讨论】：

看起来对 flexbox 很有用 (codepen.io/chriscoyier/pen/qazmI) 可惜目前只有 chrome 支持新语法。

【参考方案1】：

这可能不是您所希望的，但如果您真的不知道每列过滤器的宽度或数量，那么我认为您应该考虑其他可能的设计。

这是过滤器下拉列表的主要候选者。是的，它没有那么酷，但很实用。

另一种选择是为每列设置固定宽度，然后使用text-overflow: ellipsis; 处理文本溢出。这将帮助访问者了解有更多可用的过滤器，并且您可以使用一个小箭头图形来完成交易，单击该箭头图形会滑过以显示其他过滤器。像这样的：

我知道你要一把锤子，我给了你一根香蕉，所以我很抱歉这没有用。

【讨论】：

在 990px​​ 的容器中总是会有这 4 个过滤器，我想在所有不同语言的末端保留 25px 的空间。所以它们的文本长度会略有变化，我希望 3 个中间空格相等。

【参考方案2】：

如果您想使整个内容居中，您应该在您正在执行的过滤器容器上使用width: 100%; margin: 0 auto;。如果您想拥有相同的填充，则不需要.leftpositive, .leftnegative, .spacingforlanguage1。你可以简单地做

.filter  padding-right: 2%; 
.filter:last-child  padding-right: 0; 

这样，它与您剩余的空间量有关，并且间距将相对相等。您还可以创建一个网格并设置任何给定过滤器可以容纳在容器中的最大宽度（例如，第一个过滤器的宽度为 33%，第二个过滤器的宽度为 25%，等等）。这是保持平衡的最佳方式，尤其是对于不同的浏览器宽度和设备。

【讨论】：

我明白你的意思，但我无法定义宽度，因为我们永远不会知道它们，并且在这样的区域中将它们添加到整个站点会很痛苦。我需要某种类型的自动计算以使 3 个中间空间相等。

这就是使用百分比的意义——你永远不必计算——它们都是相对于你所拥有的空间，但它们都是相等的。

【参考方案3】：

您可以尝试简单地对每个文本的宽度求和，然后从整体的宽度中减去它，再减去 3 并将其作为除最后一个元素之外的每个元素的右边距。

您可以创建通用插件，因为这将适用于任意数量的项目在具有长度的 jQuery 对象中，并且您可以使用 parent() 获取容器。

你可以试试这个：http://jsfiddle.net/UTaSg/104/