如何保持我的圆形div不移动

在此Codepen 每个圆圈需要转换为800px的新配置。我正在寻找的配置是circle1和circle2仍然位于页面的中心位置，并且在圆圈1和2的下面有circle3。为了清晰起见，下图中的图像显示了我希望圆圈最终如何显示。如何保持我的圆形div不移动

Circles in correct postion

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之间的中间位置？

来源

2015-07-10 roygbiv

我们可以看到一些html吗？ –

当然..我乞求认为，我想在这里实现与Flex盒很难做，因为这是我用来布局CSS。 – roygbiv

你有没有看到我的答案？你能评论它吗？ –

试试我的解决方案（编译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%，看起来没问题。也删除一些不必要的代码。

P.S.也许我不明白你的问题，但我只看到了这个问题。

来源

2015-07-11 16:22:23

非常好的答案@Sergey我看到将顶部：90px改为'margin-top：28.5％'会发生什么情况然而，在我看到您的答案之前，我解决了这个问题。我也改变了圈子的配置，让**项目**在上面和另外两个波纹圈上。无论如何，要解决我的问题，我可以使用'left：-18％'将圆圈调整为800像素的媒体查询。随意去检查我的**全新的解决方案在[小提琴]（https://jsfiddle.net/kapena/bb2zr7vk/2/）**反馈将不胜感激**抱歉花了一段时间回到您** – roygbiv

我认为circle3看起来他正在，但他实际上是not..What的情况是，我把他从他原来的位置摆在首位，因此circle3只有知道他应根据在哪里告诉他去。

因为我告诉circle3移动left:-150px;他已经去了那里，即使我缩小视口，他也会留在那里。改变的是视角不是circle3，他保持在他的位置，但不会调整到视口的位置，因为我把它缩小。

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

来源

2015-07-10 21:32:05 roygbiv

如何保持我的圆形div不移动

回答

相关问题