为什么我不能在以下方案中对齐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。

* { 
    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>