如何让我的圆圈 div 不移动答案

【问题标题】：How to keep my circle div from moving如何让我的圆圈 div 不移动
【发布时间】：2015-07-12 01:52:05
【问题描述】：

在这个Codepen里面每个圈子都需要在800px 处转换为新配置。我正在寻找的配置是让circle1 和circle2 仍然在页面中居中，并且在圆圈1 和2 下方有circle3。为清楚起见，下图显示了我希望圆圈结束的方式。

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>

正如您在屏幕截图中看到的那样，我可以通过告诉circle3 将circle1 和circle2 下方的circle3 移动到稍微向左移动的circle1 和circle2移动left: -150px。

但是circle3 确实不希望在移动时留在他的位置。所以如果我把他滑下来，那么我们显然会一直滑到左下角。无论我在哪里移动circle3，当我将视口移动到更小的尺寸时，他都会继续移动。

这是我的媒体查询，告诉圆圈在800px 时移动：

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

  .circle1, circle2 {
    left: 20%;
  }

  .circle3 {
    left: -150px;
  }
}

我认为这需要将 circle3 转移到 left: -150px。

如何在保持circle1 和circle2 之间居中的同时保持circle3 不继续移动？

【问题讨论】：

我们可以看一些html吗？
当然..我想我想在这里实现的目标很难用 flex box 来实现，因为这是我用来布局 css 的。
你看到我的回答了吗？你能评论一下吗？

标签： html css css-transitions

【解决方案1】：

试试我的解决方案（将 SCSS 编译为 CSS 代码 sn-p，请参阅 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%，看起来还可以。还删除了一些不必要的代码。

附：也许我没看懂你的问题，但我只看到了这个问题。

【讨论】：

很好的答案@Sergey 我看到将top:90px 更改为margin-top:28.5% 会发生什么但是我在看到你的答案之前解决了这个问题。我还更改了圆圈的配置，使 projects 圆圈位于顶部，另外两个位于下方。无论如何，要解决我的问题，我可以在将圆圈调整为 800px 的媒体查询时使用 left:-18% 。请随时在Fiddle 上查看我的全新解决方案 **我们将非常感谢您提供反馈 **抱歉，我们花了一些时间回复您

【解决方案2】：

我认为circle3 看起来他在移动，但实际上他并没有。发生的事情是我首先将他移出了原来的位置，因此circle3 只有知道他应该在哪里根据我告诉他去哪里。

自从我告诉circle3 移动left:-150px; 后，他已经去了那里，即使我缩小了视口，他也会呆在那里。改变的是视口而不是circle3，他保持在他的位置，但当我把它变小时不要调整到视口的位置。

我相信这就是为什么circle3 不会停留在两个圆圈之间的原因，因为他现在不知道如何调整。

【讨论】：