javascript - 围绕圆形Div的Divs

我正在尝试将5 div放在一个圆形div上，如何实现呢？

到目前为止，这是我的代码:

.main{
	border: 2px dotted #000000;
	border-radius: 50%;
	width: 500px;
	height: 500px;
}
.cirlce1{
	height: 50px;
	width: 50px;
	border: 2px dotted #000000;
	border-radius: 50%;
	top: 50px;
}
.cirlce2{
	height: 50px;
	width: 50px;
	border: 2px dotted #000000;
	border-radius: 50%;
	top: 50px;
}

<div class="main">
	<div class="cirlce1"></div>
	<div class="cirlce2"></div>
</div>

我希望我的输出像



谢谢。

最佳答案

您可以将小圆圈的位置设置为position: absolute;，然后使用top，left，right或bottom进行播放，以将其放置在所需的位置。

我建议您使用%设置位置，这样它就会响应，但是如果大圆圈是静态的，您可以使用px设置位置。

.main{
	border: 2px dotted #000000;
	border-radius: 50%;
	width: 500px;
	height: 500px;
}
.cirlce1{
  position: absolute;
	height: 50px;
	width: 50px;
	border: 2px dotted #000000;
	border-radius: 50%;
	top: 50%;
}
.cirlce2{
  position: absolute;
	height: 50px;
	width: 50px;
	border: 2px dotted #000000;
	border-radius: 50%;
  left: 50%;
}

<div class="main">
	<div class="cirlce1"></div>
	<div class="cirlce2"></div>
</div>

关于javascript - 围绕圆形Div的Divs，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46157122/