다음 구성표에서 div를 정렬 할 수없는 이유는 무엇입니까/마지막 컨테이너가 보이지 않는 이유는 무엇입니까?

Question

다른 부모 컨테이너에 7 개의 div를 정렬하고 싶습니다. 모두 맨 위 컨테이너와 같은 높이와 첫 번째와 마지막 것을 제외하고 너비가 같아야합니다.

<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; 
} 

그러나 발생하면 마지막 사업부가 나타나지 않는다는 점이다 (나는 사진을 첨부

HTML :

은 그 같은 시도) 그리고 왜 나는 모릅니다. 너 좀 도와 줄 수있어?

미리 감사드립니다. :-)

Answer 1

요소의 border는 box-sizing로서의 원소의 width 기본적으로 기본적으로 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>