div随机大小随机位置摆放不重叠

在网页设计中，如果需要创建div元素以随机大小和位置，并保证它们不会重叠，通常会通过JavaScript或CSS结合使用来实现。这是一个基本步骤：

1. **HTML结构**：首先，你需要一些基础的div容器元素，例如：

   <div class="container"></div>

2. **CSS样式**：设置一个包含所有div的基本样式，以及允许绝对定位的规则：

   .container {
     position: relative;
   }
   .random-box {
     position: absolute;
     width: 0;
     height: 0;
     overflow: hidden; /* 隐藏溢出内容 */
   }

3. **JavaScript/jQuery**：动态生成并放置div，可以参考以下伪代码：

   function createRandomBoxes(num) {
     for (let i = 0; i < num; i++) {
       const boxWidth = Math.floor(Math.random() * 200) + 50; // 随机宽度
       const boxHeight = Math.floor(Math.random() * 200) + 50; // 随机高度
       const left = Math.floor(Math.random() * window.innerWidth - boxWidth); // 随机左边界
       const top = Math.floor(Math.random() * window.innerHeight - boxHeight); // 随机上边界

       const newBox = document.createElement('div');
       newBox.className = 'random-box';
       newBox.style.width = `${boxWidth}px`;
       newBox.style.height = `${boxHeight}px`;
       newBox.style.left = `${left}px`;
       newBox.style.top = `${top}px`;

       container.appendChild(newBox);
     }
   }

   // 调用函数生成一定数量的div
   createRandomBoxes(10);

4. **检查重叠**：为了防止重叠，你还可以添加一些碰撞检测算法，如`offsetTop`、`offsetLeft`属性来检查新元素是否与其他元素重叠。但这通常会在性能上造成负担，所以一般情况下，我们会尽量避免在生成时就考虑到这个问题。