我可以使用HTML和CSS随机分散页面周围的div吗？

Question

我希望在页面的中心有一个方框，周围有几个方框，大小不一，随机位置，没有重叠。

我认为这不可能只用html和css，并且需要javascript / html DOM。

你见过这个例子吗？您是否有任何有用的提示或代码？不介意它是否解决了整个问题，其中一个子问题（例如没有重叠）的解决方案也是有用的！

由于 alt text http://img99.imageshack.us/img99/3563/scattered.jpg

Answer 1

如果尺寸固定，完美居中的div并不难。诀窍是应用负边距：

#centered {
  width: 400px; height: 200px;
  position: absolute; top: 50%; left: 50%;
  margin-left: -200px; margin-top: -100px;
}

现在，要相对于此居中的div定位其他div，请使用position: relative。

示例HTML snippit：

<div id="centered">
  <div id="other"></div>
</div>

除上述内容外，还有以下CSS：

#other {
  width: 200px; height: 100px;
  position: relative; top: -150px; left: 180px;
}

添加边框或背景颜色以更好地查看示例：

div {
  border: 1px solid black;
}

如果这不是静态页面，并且您想要在每个页面加载时随机化，您可以使用Javascript或某些服务器端脚本来动态创建和设置div。

Answer 2

我假设您想要随机化每个页面加载，以便不同的用户看到不同的东西。如果是这样，仅使用HTML和CSS是不可能的。 CSS以一致的方式设计为具有确定性和可重现性，这与您在此处的目标相反。

然而，巧妙地解决这个问题的方法是从动态页面链接样式表，动态页面本身就是随机CSS。例如，具有以下内容：

<link rel="stylesheet" type="text/css" href="styles.php"/>

其中styles.php是一个生成随机CSS的PHP页面。

Answer 3

就你的问题而言：不能只使用HTML和CSS。

Answer 4

我不能用HTML和CSS完成，你的选择是：

• 每次使用PHP等服务器端语言创建样式表，并提供预先计算到浏览器的内容
• 使用基本的固定样式表并通过Javascript修改DOM

对于非重叠部分，你必须做一些数学/几何：为顶点生成坐标，确保它们不会落入先前创建的框中（枯燥但非常简单）并使用position: absolute放置它们。