0

So I need to make evenly spaced out elements for gallery but apparently 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">&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>

So the gallery container is 80vw so if I want 4 divs evenly spaced out I do 80/4=20, 20-1=19, 1/2=0.5, right? I can't understand why it displays so strangely.

EDIT: My question is how to make it behave the way it should

4

3 回答 3

0

好的，这确实是错误的片段，我只是将我从元素宽度而不是 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; }
于 2015-02-13T20:28:13.493 回答
0

您只在左侧设置了 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">&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>

于 2015-02-13T20:13:04.037 回答
0

这似乎是合理的，但这不是一个很好的解决方案，只是微调了大小和边距。

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

于 2015-02-13T20:16:19.390 回答