在 vw 中设置了 Div 的宽度，但无法正常工作

Question

我的 CSS 有问题（或者至少我认为问题出在 CSS 上）。我在大众中设置了所有内容，但它的行为很奇怪。在大分辨率下看起来很正常，但在小分辨率下则不然。

您可以在此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如下...

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

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

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

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

  </div>
</div>

使用display:flex如下...

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

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

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

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

  </div>
</div>