显然 1vw 不是 0.5vw+0.5vw
Apparently 1vw is not 0.5vw+0.5vw
所以我需要为画廊制作均匀间隔的元素,但显然 1vw =/= 2 * 0.5vw
.galeriacontainer {
position: absolute;
width: 80vw;
max-width: 80vw;
height: 75vh;
max-height: 75vh;
background-color: rgba(20, 20, 20, 0.4);
left: 10vw;
top: 12.5vh;
}
.itemframe {
width: 19vw;
max-width: 19vw;
height: 24vh;
max-height: 24vh;
margin-left: 0.5vw;
margin-top: 0.5vh;
overflow: hidden;
background: rgba(255, 255, 255, 0.2);
float: left;
overflow: hidden;
}
<div class="galeriacontainer">
<div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div>
<div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div>
<div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div>
</div>
所以画廊容器是 80vw,所以如果我想要 4 个 div 均匀分布,我会做 80/4=20、20-1=19、1/2=0.5,对吗?看不懂为什么会这么奇怪
编辑:我的问题是如何让它按照应有的方式运行
您只在左侧设置了 0.5vw 边距,但忘记了等效的右侧边距:
.galeriacontainer {
position: absolute;
width: 80vw;
max-width: 80vw;
height: 75vh;
max-height: 75vh;
background-color: rgba(20, 20, 20, 0.4);
left: 10vw;
top: 12.5vh;
}
.itemframe {
width: 19vw;
max-width: 19vw;
height: 24vh;
max-height: 24vh;
margin-left: 0.5vw;
margin-right: 0.5vw;
margin-top: 0.5vh;
bottom: 0.5vh;
overflow: hidden;
background: rgba(255, 255, 255, 0.2);
float: left;
overflow: hidden;
}
<div class="galeriacontainer">
<div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div>
<div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div>
<div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div>
</div>
这似乎是合理的,但这不是一个很好的解决方案,只是微调大小和边距。
.galeriacontainer {
position: absolute;
width: 80vw;
max-width: 80vw;
height: 75vh;
max-height: 75vh;
margin: 0;
padding: 0;
background-color: rgba(20, 20, 20, 0.4);
left: 10vw;
top: 12.5vh;
}
.itemframe {
width: 19.25vw;
height: 23.75vh;
margin-left: 0.6vw;
margin-top: 0.95vh;
overflow: hidden;
background: rgba(255, 255, 255, 0.2);
float: left;
overflow: hidden;
}
<div class="galeriacontainer">
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
</div>
好吧,那确实是错误的片段,我只是通过划分我从元素宽度而不是 19*4=76、80-76=4、4/5(这些元素之间的空格数,包括外面的)=0.8
.itemframe {
width: 19vw;
max-width: 19vw;
height: 24vh;
max-height: 24vh;
margin-left: 0.8vw;
margin-top: 0.75vh;
overflow: hidden;
background: rgba(255,255,255,0.2);
float: left;
overflow: hidden; }
所以我需要为画廊制作均匀间隔的元素,但显然 1vw =/= 2 * 0.5vw
.galeriacontainer {
position: absolute;
width: 80vw;
max-width: 80vw;
height: 75vh;
max-height: 75vh;
background-color: rgba(20, 20, 20, 0.4);
left: 10vw;
top: 12.5vh;
}
.itemframe {
width: 19vw;
max-width: 19vw;
height: 24vh;
max-height: 24vh;
margin-left: 0.5vw;
margin-top: 0.5vh;
overflow: hidden;
background: rgba(255, 255, 255, 0.2);
float: left;
overflow: hidden;
}
<div class="galeriacontainer">
<div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div>
<div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div>
<div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div>
</div>
所以画廊容器是 80vw,所以如果我想要 4 个 div 均匀分布,我会做 80/4=20、20-1=19、1/2=0.5,对吗?看不懂为什么会这么奇怪
编辑:我的问题是如何让它按照应有的方式运行
您只在左侧设置了 0.5vw 边距,但忘记了等效的右侧边距:
.galeriacontainer {
position: absolute;
width: 80vw;
max-width: 80vw;
height: 75vh;
max-height: 75vh;
background-color: rgba(20, 20, 20, 0.4);
left: 10vw;
top: 12.5vh;
}
.itemframe {
width: 19vw;
max-width: 19vw;
height: 24vh;
max-height: 24vh;
margin-left: 0.5vw;
margin-right: 0.5vw;
margin-top: 0.5vh;
bottom: 0.5vh;
overflow: hidden;
background: rgba(255, 255, 255, 0.2);
float: left;
overflow: hidden;
}
<div class="galeriacontainer">
<div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div>
<div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div>
<div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div><div class="itemframe"> </div>
</div>
这似乎是合理的,但这不是一个很好的解决方案,只是微调大小和边距。
.galeriacontainer {
position: absolute;
width: 80vw;
max-width: 80vw;
height: 75vh;
max-height: 75vh;
margin: 0;
padding: 0;
background-color: rgba(20, 20, 20, 0.4);
left: 10vw;
top: 12.5vh;
}
.itemframe {
width: 19.25vw;
height: 23.75vh;
margin-left: 0.6vw;
margin-top: 0.95vh;
overflow: hidden;
background: rgba(255, 255, 255, 0.2);
float: left;
overflow: hidden;
}
<div class="galeriacontainer">
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
<div class="itemframe"> </div>
</div>
好吧,那确实是错误的片段,我只是通过划分我从元素宽度而不是 19*4=76、80-76=4、4/5(这些元素之间的空格数,包括外面的)=0.8
.itemframe {
width: 19vw;
max-width: 19vw;
height: 24vh;
max-height: 24vh;
margin-left: 0.8vw;
margin-top: 0.75vh;
overflow: hidden;
background: rgba(255,255,255,0.2);
float: left;
overflow: hidden; }