在此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>
正如您在屏幕截图中看到的那样,我能够将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
之间居中?
答案 0 :(得分: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%
,似乎没问题。还删除了一些不必要的代码。
P.S。也许我不明白你的问题,但我只看到了这个问题。
答案 1 :(得分:0)
我认为circle3
看起来像是在移动,但他实际上并不是......发生的事情是我首先将他从原来的位置移开了circle3
< / strong>根据我告诉他去的地方知道他应该在哪里。
由于我告诉circle3
移动left:-150px;
他已经去了那里,即使我将视口缩小,也会留在那里。正在改变的是视口不是circle3
他留在他的位置但是当我把它变小时不能调整到视口的位置。
我相信这就是为什么circle3
不会在两个圆圈之间保持居中的原因,因为他此时并不知道如何调整。