如何防止我的圈子移动

Question

在此Codepen中, 每个圈子都需要转换为新的配置800px.我正在寻找的配置是在页面中居住circle1并且circle2仍然居中,并且circle3在圆圈1和2下方.为了清晰起见,下面的图像显示了我希望圆圈结束的方式.

HTML:

<div class="circles">
  <div class="circle1">
    <a id="projects" href="#">Projects</a>
  </div>

  <div class="circle2">
    <a id="about" href="#">About</a>
  </div>

  <div class="circle3">
      <a id="contact" href="#">Contact</a>
  </div>
</div>

正如你在屏幕截图中看到的那样,我能够转换circle1并circle2稍微向左移动circle3,同时也在下方移动circle1并circle2告诉circle3移动left: -150px.

但是circle3也没有想留在他的位置,当他移动.因此,如果我将他滑下来,我们显然会向左下方滑动.无论我移动到哪里circle3,当我将视口移动到更小的尺寸时,他都会继续移动.

这是我的媒体查询,告诉圈子在以下时移动800px:

@media (max-width: 800px) {
  .circles {
    width: 80%;
  }

  .circle1, circle2 {
    left: 20%;
  }

  .circle3 {
    left: -150px;
  }
}

我想这有东西动circle3来left: -150px.

我如何保持circle3继续移动,同时保持其中心circle1和circle2？

Answer 1

尝试我的解决方案（将 SCSS 编译为 CSS 代码片段，请参阅Codepen上的原始内容）：

.circles {
    padding: 2rem;
    display: flex;
    margin: 0 auto;
    width: 90%;
}

.circle1, .circle2, .circle3 {
    display: flex;
    position: relative;
    justify-content: center;
    border-radius: 50%;
    padding-bottom: 30%;
    height: 0;
    width: 30%;
    margin: 5px;
    background-color: magenta;
    left: 0;
    transition: margin-top 0.5s linear, left 0.5s linear;
}

.circle1 #projects, .circle2 #projects, .circle3 #projects, .circle2 #about, .circle3 #contact {
    line-height: 1;
    margin-top: -0.5em;
    padding-top: 50%;
    color: #fff;
}

.circle2 {
    background-color: blue;
}

.circle3 {
    background-color: gold;
}

@media (max-width: 800px) {
    .circle1, .circle2, .circle3, .circle2 {
        left: 15%;
    }

    .circle3 {
        margin: 0 auto;
        margin-top: 28.5%;
        left: -35.11%;
    }
}

<div class="circles">
    <div class="circle1">
        <a id="projects" href="#">Projects</a>
    </div>

    <div class="circle2">
        <a id="about" href="#">About</a>
    </div>

    <div class="circle3">
        <a id="contact" href="#">Contact</a>
    </div>
</div>

您使用相对值来设置元素的高度（padding-bottom: 30%在您的情况下），但使用绝对值来设置.circle3( top: 90px) 的顶部位置。当您调整视口大小时，所有圆圈的高度都会发生变化，但.circle3位置仍然固定。

我改成top: 90px了margin-top: 28.5%，看起来还可以。还删除了一些不必要的代码。

PS也许我不明白你的问题，但我只看到这个问题。