php - 在网格上的随机位置设置一个 div

Question

我正在尝试制作一个占据浏览器窗口宽度 100% 的网格，首先我不确定如何处理这个网格，其次我想要一个 div 在该网格中有一个随机位置, 但只有在该职位尚未被占用时才会填补该职位。

我想我的问题是，我将如何着手，如果可能的话。

我猜我需要一个数据库来记录所有位置？

ps:当我说网格时，我不是指 960 网格或任何框架网格，我只是想要一个简单的方形网格

尽管我正在寻找每个正方形为 15px x 15px 并且“边框”仅为 1px

感谢您的帮助。

编辑:所有答案都很好，都可以接受其他人没有工作，因为他们工作得一样好。我最初的要求是流体网格，但后来发生了变化，这使得我选择的答案更容易集成到我的元素中。谢谢大家的帮助!

Answer 1

你可以设置一个<div>的 CSS 位置:

#div1 { 
    position: absolute;
    left: 100px;
    top: 100px; 
    width: 15px;
    height: 15px; 
}

应该可以。然后，通过它们的左/顶部(将它们存储在某处)了解每个 div 的坐标以及它们的大小，您可以在放置新的 div 时使用一些简单的数学检查“碰撞”。

例如，检查单个 div 是否为 New与 Existing 相撞一个你可以检查是否有New的 Angular 在 Existing 内的正方形，例如:

• 如果 LeftNew >= LeftExisting AND LeftNew <= (LeftExisting + WidthExisting) 则发生碰撞
• 如果 TopNew >= TopExisting AND TopNew <= (TopExisting + HeightExisting) 然后碰撞