Question

所以我需要为画廊制作均匀间隔的元素，但显然1vw = / = 2 * 0.5vw

＆＃13;

.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;
}

＆＃13;

<div class="galeriacontainer">
  <div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div>
  <div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div>
  <div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div>
</div>

＆＃13;

所以画廊容器是80vw所以如果我想要4个div均匀间隔我做80/4 = 20,20-1 = 19,1 / 2 = 0.5，对吧？我无法理解为什么它显示得如此奇怪。

编辑：我的问题是如何让它按照应该的方式行事

Answer 1

您只在左侧设置了0.5vw的保证金，但忘记了等效的保证金权利：

＆＃13;

.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;
}

＆＃13;

<div class="galeriacontainer">
  <div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div>
  <div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div>
  <div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div><div class="itemframe">&nbsp;</div>
</div>

＆＃13;

Answer 2

这似乎是相当均匀的，但它不是一个非常好的解决方案，只是微调的尺寸和利润。

.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">&nbsp;</div>
  <div class="itemframe">&nbsp;</div>
  <div class="itemframe">&nbsp;</div>
  <div class="itemframe">&nbsp;</div>
  <div class="itemframe">&nbsp;</div>
  <div class="itemframe">&nbsp;</div>
  <div class="itemframe">&nbsp;</div>
  <div class="itemframe">&nbsp;</div>
  <div class="itemframe">&nbsp;</div>
  <div class="itemframe">&nbsp;</div>
  <div class="itemframe">&nbsp;</div>
  <div class="itemframe">&nbsp;</div>
</div>

Answer 3

好的，这确实是错误的片段，我只是通过划分我从元素宽度推导而不是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不是0.5vw + 0.5vw

3 个答案: