래핑 된 요소의 CSS 컨테이너 너비

Question

여러 인라인 블록 요소를 감싸기 위해 컨테이너 div를 확장하려고합니다. 컨테이너가 축소되거나 더 많은 요소가 추가 될 때까지 모든 것이 작동합니다. 여기

.top { 
 
    width: 80%; 
 
    background-color: red; 
 
} 
 
.container { 
 
    background-color: gray; 
 
    display: inline-block; 
 
} 
 
.box { 
 
    display: inline-block; 
 
    background-color: blue; 
 
    height: 100px; 
 
    width: 100px; 
 
}

<div class="top"> 
 
    <div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

는 일례이다. https://jsfiddle.net/8fhjaf6z/11/

회색. 컨테이너는 상자를 추가하거나 .top 컨테이너를 줄이기 전까지 상자 안을 상자 안에 포장합니다. 그 시점에서 상자는 줄을 서서 다음 줄로 이동하지만 원하는 줄은 다음 줄로 이동합니다. 이제 회색. 컨테이너가 빨간색 .top 컨테이너를 채우고 오른쪽 빈칸이 남습니다. .box 요소를 움직이려고했지만 동일한 결과가 나옵니다.

도움을 주시면 감사하겠습니다.

Answer 1

다음 줄로 이동 한 상자로 작성된 공간을 채울 수있는 방법 중 하나는 .container의 디스플레이를 인라인으로 설정하는 것입니다. 이제 회색 배경이 상자 뒤에 있습니다.

.top { 
 
    width: 80%; 
 
    background-color: red; 
 
    font-size: 0; 
 
} 
 
.container { 
 
    background-color: gray; 
 
    display: inline; 
 
    padding: 105px 0 0 0; 
 
} 
 
.box { 
 
    display: inline-block; 
 
    background-color: blue; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 0 0 5px 5px; 
 
}

<div class="top"> 
 
    <div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

: 최고 패딩을 사용하면보다 회색 배경 (높이 속성 수 없습니다 인라인 요소에 높이를 설정하기위한 해결 방법으로) 상자의 전체 높이를 취할 수 있습니다