div的宽度在vw中设置，但不能正常工作答案

【问题标题】：Div's width set in vw, but doesn't work properlydiv的宽度在vw中设置，但不能正常工作
【发布时间】：2017-09-17 17:46:26
【问题描述】：

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

您可以在this GIF 上看到它（它太大，无法在此处上传）。如您所见，当屏幕变小时，最后一个 div 会向下移动到第一个 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>

有人可以帮帮我吗？

【问题讨论】：

使用display:table 或flex

标签： html css width viewport-units

【解决方案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>

【讨论】：