0

したがって、ギャラリー用に等間隔の要素を作成する必要がありますが、明らかに 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>

ギャラリー コンテナは 80vw なので、4 つの div を均等に配置したい場合は、80/4=20、20-1=19、1/2=0.5 となります。なぜこんなに変な表示になるのか理解できません。

編集:私の質問は、それを本来の方法で動作させる方法です

4

3 に答える 3

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 に答える