Question

我想制作一个太阳系，到目前为止我在太阳周围使用了两个div。一个div来指定轨道路径和地球，以遵循该路径。问题是我想将#earth div放到#earth-orbit div上，其边界半径为50%。我已将#earth-orbit包裹在#earth这样的地方：

<div id='sun'>
</div>

<div id='earth-orbit'>
    <div id='earth'>
    </div>
</div>

然后，在我的CSS中我到目前为止：

#sun
{
    margin: auto;
    height: 200px;
    width: 200px;
    background-color: orange;
    position: absolute;
    border-radius: 50%;
    top: 0; left: 0; bottom: 0; right: 0;
}

#earth-orbit
{
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
    position: absolute;
    border-width: 2px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;

    height: 500px;
    width: 500px;
}

#earth
{
    height: 50px;
    width: 50px;
    background-color: white;
    border-radius: 50%;
}

如何将#earth放置在#earth-orbit的弯曲边框上？

编辑：当你不想同时将整个系统保持在屏幕中间时，很容易做到这一点

Answer 1

<style>
#sun
{
    margin: auto;
    height: 200px;
    width: 200px;
    background-color: orange;
    position: absolute;
    border-radius: 50%;
    top: 0; left: 0; bottom: 0; right: 0;
}

#earth-orbit
{
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
    position: absolute;
    border-width: 2px;
    border-style: dotted;
    border-color: blue;
    border-radius: 50%;

    height: 500px;
    width: 500px;
}

#earth
{
position:absolute;
left:130px;
height: 50px;
    width: 50px;
    background-color: red;
    border-radius: 50%;
}
</style>


<div id='sun'>
</div>

<div id='earth-orbit'>
    <div id='earth'>
    </div>
</div>

Answer 2

如果你想制作静态图像，你可以绝对定位#earth：

#earth
  {
    position:absolute;
    top: -25px;

    height: 50px;
    width: 50px;
    background-color: white;
    border-radius: 50%;
  }

并且不要忘记：

#earth-orbit
{
    top: 25px; left: 25px; bottom: 25px; right: 25px;
    position: absolute;
}

在另一个圆形div的边框上放置一个div

2 个答案: