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)));

更新了小提琴：https://jsfiddle.net/mszvbfoe/5/

Answer 2

放溢：隐藏;在容器内并修复容器的宽度

#container 
{
    background-color: #446b81;
    overflow:hidden;
    width:500px;
}

如何防止动态附加的div溢出？

2 个答案: