为什么我不能在以下方案中对齐 div/为什么最后一个容器不可见？

Question

我想在另一个父容器中对齐七个 div，除了第一个和最后一个容器外，它们都应该具有相同的高度（与父容器一样）和宽度。

我试过类似的东西：

HTML

<div id="weatherBar">
  <div class="arrow"></div>
  <div class="table-wrapper">
    <div>1</div>
  </div>
  <div class="table-wrapper">
    <div>2</div>
  </div>
  <div class="table-wrapper">
    <div>3</div>
  </div>
  <div class="table-wrapper">
    <div>4</div>
  </div>
  <div class="table-wrapper">
    <div>5</div>
  </div>
  <div class="arrow"></div>
</div>

CSS

div#weatherBar {
  position: relative;
  width: 60vw;
  max-width: 60vw;
  height: 10vh;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(255, 255, 255);
  overflow: hidden;
  margin-top: 10vh;
}

div#weatherBar div.table-wrapper {
  min-height: 10vh;
  max-height: 10vh;
  min-width: 10vw;
  max-width: 10vw;
  border: solid 0.5px blue;
  float: left;
  overflow: hidden;
}

div#weatherBar div.arrow {
  min-height: 10vh;
  max-height: 10vh;
  min-width: 5vw;
  max-width: 5vw;
  float: left;
  overflow: hidden;
  background-color: red;
}

但是最后的 div 没有出现（我附上了图片），我不知道为什么。你能帮帮我吗？

提前致谢！ :-)

Answer 1

元素的 border 默认不包含在元素的 width 中，因为 box-sizing 默认为 content-box。

将其更改为 border-box，以便在 width 中包含边框，使用：

* {
  box-sizing: border-box;
}

参见下面的演示：

* {
  box-sizing: border-box;
}
div#weatherBar {
  position: relative;
  width: 60vw;
  max-width: 60vw;
  height: 10vh;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(255, 255, 255);
  overflow: hidden;
  margin-top: 10vh;
}

div#weatherBar div.table-wrapper {
  min-height: 10vh;
  max-height: 10vh;
  min-width: 10vw;
  max-width: 10vw;
  border: solid 0.5px blue;
  float: left;
  overflow: hidden;
}

div#weatherBar div.arrow {
  min-height: 10vh;
  max-height: 10vh;
  min-width: 5vw;
  max-width: 5vw;
  float: left;
  overflow: hidden;
  background-color: red;
}

<div id="weatherBar">
  <div class="arrow"></div>
  <div class="table-wrapper">
    <div>1</div>
  </div>
  <div class="table-wrapper">
    <div>2</div>
  </div>
  <div class="table-wrapper">
    <div>3</div>
  </div>
  <div class="table-wrapper">
    <div>4</div>
  </div>
  <div class="table-wrapper">
    <div>5</div>
  </div>
  <div class="arrow"></div>
</div>

为什么我不能在以下方案中对齐 div/为什么最后一个容器不可见？

Why can't I align divs in the following scheme / why is the last container not visible?

html

css

web

css-position

box-sizing