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

Question

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

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

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>

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

Div's width set in vw, but doesn't work properly

html

css

width

viewport-units