Div的宽度设置为vw，但不能正常工作

Question

我有CSS的问题（或者至少我认为问题出在CSS中）。我把所有东西都设置在大众汽车中，但它很奇怪。在大分辨率下它看起来很正常，但在小分辨率下却没有。

你可以在this GIF上看到它（它太大而无法在此处上传）。如您所见，当屏幕较小时，最后一个div在第一个下移。

这是现场演示：http://mc2.devicarus.eu/

var width = document.getElementById("box1").offsetWidth;
var box1 = document.getElementById('box1');
box1.style.height = width + "px";
var box2 = document.getElementById('box2');
box2.style.height = width + "px";
var box3 = document.getElementById('box3');
box3.style.height = width + "px";

div.boxes {
  width: 80vw;
  margin-left: 10vw;
  margin-right: 10vw;
  margin-top: 3%;
}

div.box {
  border-style: solid;
  border-color: black;
  border-width: 0.15vw;
  width: 24.7667vw;
  background: url('http://mc2.devicarus.eu/img/wood.png');
  background-size: 150px;
  display: inline-block;
  margin-left: 0.8vw;
  margin-right: 0.8vw;
  text-align: center;
}

<div class="boxes">
  <div class="box" id="box1">

  </div>
  <div class="box" id="box2">

  </div>
  <div class="box" id="box3">

  </div>
</div>

有人能帮助我吗？

Answer 1

使用display:table，如下所示......

＆＃13;

＆＃13;

div.boxes {
  width: 80vw;
  margin-left: 10vw;
  margin-right: 10vw;
  margin-top: 3%;
  display:table;    /* Added */
}

div.box {
  border-style: solid;
  border-color: black;
  border-width: 0.15vw;
  width: 24.7667vw;
  background: url('http://mc2.devicarus.eu/img/wood.png');
  background-size: 150px;
  display: table-cell;  /* Added */
  margin-left: 0.8vw;
  margin-right: 0.8vw;
  text-align: center;
}

＆＃13;

<div class="boxes">
  <div class="box" id="box1">

  </div>
  <div class="box" id="box2">

  </div>
  <div class="box" id="box3">

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用display:flex，如下所示......

＆＃13;

＆＃13;

div.boxes {
  width: 80vw;
  margin-left: 10vw;
  margin-right: 10vw;
  margin-top: 3%;
  display: inline-flex;  /* Added */
}

div.box {
  border-style: solid;
  border-color: black;
  border-width: 0.15vw;
  width: 24.7667vw;
  background: url('http://mc2.devicarus.eu/img/wood.png');
  background-size: 150px;
  /* display: table-cell; */
  margin-left: 0.8vw;
  margin-right: 0.8vw;
  text-align: center;
}

＆＃13;

<div class="boxes">
  <div class="box" id="box1">

  </div>
  <div class="box" id="box2">

  </div>
  <div class="box" id="box3">

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;