10

与其拥有一堆大小不同的链接，我希望我的所有标签都具有相同的大小。但是，我的目标是尽量减少制作云所需的空间量，也就是尽量减少使用的行数。

举个例子：

例子
（来源：stevethomas.com.au）

看起来像任何普通的标签云。然而，看看'roughdiamond'标签周围的所有额外空间，这些额外的空间可以被其他标签填充，比如靠近底部的'stone'，这可以有效地从云中消除一整条额外的线。

在开始新行之前，我将如何让单词填充它们上方的任何空间？我不是在谈论重新组织它们以找到所需的绝对最少行数。如果我浏览图像中的列表，“pendant”、“howlite”和“igrice”将进入第 1 行填满，“roughdiamond”将进入第 2 行，因为第 1 行已满，“电气石”将转到第 3 行，因为它不适合第 1 行或第 2 行，与 'emberald' 相同，但 'pearl' 会转到第 2 行，因为它可以放在那里，因为有额外的空间。我认为在 CSS 中可能会有某种方式来执行此操作，这只会导致链接折叠到它可以容纳的任何可填充空间中。

4

3 回答 3

6

我怀疑这在 CSS 中是可能的，因为这需要特定的计算来优化重新排列单词。

您实际上要解决的问题是 2 维装箱问题，其中装箱尺寸相同且物品尺寸可变。

正如这个关于装箱问题的答案中所提到的，将您的物品从最大到最小进行排序，然后在大件之间放置较小的单词通常会产生相当好的近似值。您将不得不尝试使用您将使用的单词类型来确定这是否适合您（他的方法可能会导致许多小单词在您的云底部分组）。

于 2010-05-03T23:25:12.230 回答
2

这不是最佳解决方案，但可能（大部分时间）比随机解决方案好得多，并且比最佳解决方案快得多：按字符串长度宽度按降序显示每个标签。

这将为您提供一个最大的安排，比最佳解决方案差 14%。

编辑：如果您按strlen宽度按升序对标签进行排序，也可以使用。

于 2010-05-03T23:45:10.333 回答
0

您可以尝试将它们放在与文本确切高度相同的 div 中，然后将它们浮动到整个地方？

于 2010-05-03T23:22:14.420 回答