javascript - 如何防止动态追加​​的div溢出？

Question

所以我试图动态地将一堆包含单词的 div 元素附加到我的页面(每个元素都有 .magnet 类)。然而，其中许多最终溢出到容器边界之外，我不知道如何阻止这种情况发生。如果有人可以看看我的 jsfiddle 并帮助我，我将不胜感激。我还在下面包含了容器的 css 代码。 JsFiddle Example

body {
margin:0 auto;
overflow:hidden;
}
#container {
background-color: #446b81;
}

.magnet {
width:45px;
background-color: #FFFFFF;
padding:5px 25px;
font-family: Times;
font-size: 16px;
border:1px outset;
position:absolute;
}

Answer 1

为什么不将文档的宽度和高度减小一些值？ (50 和 100 只是随机数，但您可以使用 div 的确切大小来修复它们)。

   testsub.css("top",Math.floor(Math.random() * ($(document).height()-50)));
   testsub.css("left",Math.floor(Math.random() * ($(document).width()-100)));

更新 fiddle :https://jsfiddle.net/mszvbfoe/5/