爲什麼我不能在以下方案中對齊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>