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

Question

我想在一个页面的中心有一个盒子和几个散落的盒子,有不同的大小,随机的位置,没有重叠.

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

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

谢谢 alt文本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.