10

我需要做这样的事情： 在此处输入图像描述

这可能看起来很简单，但有一些要求： - 包含 div 的宽度应该取决于文本长度（在 CSS 中是否可能？） - 所有圆圈都应该随机定位 - 这是最困难的部分我。

当我border-radius用于创建圆圈（设置高度、宽度和border-radius50%）时，我尝试在 JavaScript 中创建某种网格，在其中迭代每个元素并获取其尺寸。然后我得到前一个元素的位置（如果有的话）并将它们添加到当前元素尺寸。此外，添加一些边距将有助于避免冲突。这是正确的方法吗？

我只是在寻找如何解决我的两个问题的建议。

4

1 回答 1

2

根据内容大小缩放的圆圈。

  • 这是您需要首先解决的问题，因为您无法在不知道它们的尺寸的情况下将它们放置在任何地方。

  • 自然地，DIV 的大小首先按宽度扩展，然后按高度扩展。也就是说，必须首先利用容器的最大宽度，然后再进行高度约束。因此，如果不使用相对平均，制作具有相等半径的圆形刻度可能会非常困难。

  • 相对平均是根据限制您的内容的 contianer 的现有区域找到您的高度/宽度的平均尺寸。例如：

可以使用 javascript 检测限制内容的 DIV 的宽度和高度。假设您发现这些属性也分别为 200px x 20px。

你的总面积是宽*高，所以 4000px；但是我们正在尝试实现一个正方形，这样我们就可以应用圆角并形成一个圆角。我们希望找到与相同面积相等的矩形的尺寸，然后应用这些新尺寸。

要获得具有相等宽度 * 高度的相同区域，您可以执行以下操作：

√ 4000 = 63.2455532 因此：63.2455532 x 63.2455532 = 4000

随机放置 DIV，避免 DIV 之间发生冲突。

  • 找到尺寸后，您将能够在 (X,Y) 坐标上使用 rand 进行放置。将这些坐标和半径推送到数组上。使用递归也将剩余的圆圈放在碰撞失败上。碰撞失败将来自一个元素，该元素具有重叠的 (X,Y)+radius relative 在数组中被成功推送的元素。
于 2012-12-23T22:29:54.320 回答