我试图使单击中央圆圈时出现4个圆圈,就像
但是,当我调整视口大小时,div的位置会发生变化,如下面的代码所示。我尝试将位置设为相对,但这不起作用。 https://codepen.io/Refath/pen/NJbEQO
这是有问题的代码:
.subOne{
position: relative;
top: -200px;
left: 445px;
}
.subTwo{
position: relative;
top: -650px;
left: 445px;
}
.subThree{
position: relative;
top: -570px;
left: 255px;
}
.subFour{
position: relative;
top: -670px;
left: 650px;
}
我的一个想法是将子圆包裹在单独的容器div中,然后根据视口平移容器,尽管我不确定这样做是否可行。
答案 0 :(得分:1)
position: relative
用于周围项目和像素位置时,您将不会获得响应式布局。
首先,使用position: relative
将元素相对于其原始位置而不是中心圆放置。这会导致未对准。
第二,带有top: -670px; left: 650px;
的定位元素在较宽的屏幕上可能看起来不错,但在较小的屏幕上则位于视口之外。这也会弄乱您的对齐方式。
相反,请使用position: absolute
从正常流中删除周围的项目,使其相对于其容器(使用position: relative
),并使用百分比长度来提高适应性。
$(document).ready(function() {
$(".subOne").hide();
$(".subTwo").hide();
$(".subThree").hide();
$(".subFour").hide();
$(".mainCircle").bind('click', function() {
$(this).toggleClass('blue');
$(".subOne").slideToggle('fast');
$(".subTwo").slideToggle('fast');
$(".subThree").slideToggle('fast');
$(".subFour").slideToggle('fast');
});
});
body {
margin: 0;
}
.container {
position: relative;
}
.subContainer {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: coral;
}
.mainCircle,
.subOne,
.subTwo,
.subThree,
.subFour {
border: 2px red solid;
height: 100px;
width: 100px;
border-radius: 100px;
background: blue;
transition: 0.3s ease all;
}
.subOne {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%); /* see link below for explanation */
}
.subTwo {
position: absolute;
bottom: 20%;
left: 50%;
transform: translate(-50%, 50%);
}
.subThree {
position: absolute;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
}
.subFour {
position: absolute;
top: 50%;
right: 20%;
transform: translate(50%, -50%);
}
.mainCircle:hover {
background: lightblue;
transition: 0.3s ease all;
}
.blue {
border: 10px black solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="subContainer">
<div class="mainCircle"></div>
</div>
<div class="subOne"></div>
<div class="subTwo"></div>
<div class="subThree"></div>
<div class="subFour"></div>
</div>
更多详细信息:Element will not stay centered, especially when re-sizing screen
答案 1 :(得分:1)
您可以使用 percentages 代替像素来获取布局。但我会在标记上稍作更改并使用包装flexbox 来做到这一点,例如:
将圈子移动到伪元素及其悬停样式。
在第一行中放入一个圆圈,在第二行中放入三个 (包括mainCircle
),在最后一行中放入一个-将order
属性用于 ordering 和flex-basis
表示每一行的圆圈数。
您可以使用margin: 0 auto
将每个圆在其空间中居中。并投入align-content: space-around
以保持一致。
现在您可以通过改变height
的{{1}}和width
来调整相对距离。
请参见下面的演示
subContainer
$(document).ready(function() {
$(".subOne").hide();
$(".subTwo").hide();
$(".subThree").hide();
$(".subFour").hide();
$(".mainCircle").bind('click', function() {
$(this).toggleClass('blue');
$(".subOne").slideToggle('fast');
$(".subTwo").slideToggle('fast');
$(".subThree").slideToggle('fast');
$(".subFour").slideToggle('fast');
});
});
body {
overflow-y: none;
}
.container {
background: coral
}
.subContainer {
display: flex;
align-items: center;
justify-content: center;
align-content: space-around;
flex-wrap: wrap;
height: 97vh;
height: 500px; /* ADJUST THIS */
width: 500px; /* ADJUST THIS */
margin: 0 auto;
background: coral;
}
.mainCircle,
.subOne,
.subTwo,
.subThree,
.subFour {
flex: 0 0 auto;
}
.mainCircle:after,
.subOne:after,
.subTwo:after,
.subThree:after,
.subFour:after {
content: '';
display: block;
border: 2px red solid;
height: 100px;
width: 100px;
margin: 0 auto;
border-radius: 100px;
background: blue;
transition: 0.3s ease all;
}
.mainCircle:hover:after {
background: lightblue;
transition: 0.3s ease all;
}
.blue:after {
border: 10px black solid;
}
.subOne {
order: 1;
flex-basis: 100%;
}
.subTwo {
order: 2;
flex-basis: 33.33%;
}
.mainCircle {
order: 3;
flex-basis: 33.33%;
}
.subThree {
order: 4;
flex-basis: 33.33%;
}
.subFour {
order: 5;
flex-basis: 100%;
}