Question

我需要在一个方框内随机显示几个圆圈。这些圆圈都不应该在盒子外面，甚至不要碰到盒子的角落。有没有办法用相对值（百分比）绘制div中的所有圆圈？我想说的是：例如：将这个圆圈相对于盒子的左侧以10％的距离绘制，并且与盒子顶部的距离为40％。位置应该相对于盒子。目前，百分比值是针对整个页面选择的，而不仅仅是div（框）。

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="triangle.css">

<body align = "center">

    <div id='area' align = "center" 
style="width:90vw; height:40vw; border: 2px solid; margin-top:2%; margin-left:auto; margin-right:auto;">        
    </div>

Javascript功能：

for(var i=0; i<10;i++){
        Left = Math.floor(Math.random() * 80)+10;
        Top = Math.floor(Math.random() * 20) +5;
        $("#area").append("<div class='circle-blue' + id=" + i + "></div>");
        $("#" +i).css({"position":"absolute","top": Top + "%", "left": Left + "%"});
  };

这是小提琴：

http://jsfiddle.net/p6NE3/13/

Answer 1

将以下内容添加到您的CSS：

Demo Fiddle

#area{
    position:relative;
}

您需要为position:relative设置#area，以便圈子有一个标记，使其定位相对。

Answer 2

您可以轻松地按照您的方式完成此操作，只需给方框或div设置填充以确保圆圈始终位于内部。也不要让所有圆圈的最大宽度或高度大于你放入它们的div。而不是.Append，做.HTML，这会把你的新元素放在里面，它往往会更好。< / p>

随机显示框内的圆圈

2 个答案:

Demo Fiddle