응답 CSS 컨테이너는 태블릿 크기에서만 여백을 잃습니다

Question

중간 크기의 특정 열 수만큼 크기를 조정 한 다음 소형/모바일 크기의 전폭 항목으로 크기를 조정하도록 설계된 다음 CSS가 있습니다. 중간/태블릿 크기에서 .columnContainer 클래스를 사용하는 외부 컨테이너의 margin-top (예를 들어)이 분명히 버려진다는 점을 제외하면 모든 것이 작동하는 것 같습니다.

나는 이것을 파악하고 벽돌 벽에 부딪혔다 고 생각할 수있는 모든 것을 시도했습니다. 사전에 어떤 도움 덕분에, 당신은 여기에 CSS와 함께 재생할 수 있습니다 : https://jsfiddle.net/xvLmhfpa/

// This is getting stripped at medium size only! 
.columnContainer { margin-top: 20px } 

// Large size 
@media all and (min-width: 768px) { 

    .columnContainer { 
    display: table; 
    width: 100%; 
    } 
    .columnContainer > div { 
    display: table-cell; 
    } 

} 

// Medium/tablet size 
@media all and (max-width: 767px) and (min-width: 481px) { 

    .columnContainer { 
    width: 100%; 
    } 

    .columnContainer > div { 
    float: left; 
    width: 100%; 
    } 

    .columnContainer.collapse2 > div { width: 50%; } 
    .columnContainer.collapse2 div:nth-child(2n+1) { clear: both; } 
    .columnContainer.collapse3 > div { width: 33.33%; } 
    .columnContainer.collapse3 div:nth-child(3n+1) { clear: both; } 
    .columnContainer.collapse4 > div { width: 25%; } 
    .columnContainer.collapse4 div:nth-child(4n+1) { clear: both; } 
    .columnContainer.collapse5 > div { width: 20%; } 
    .columnContainer.collapse5 div:nth-child(5n+1) { clear: both; } 
    .columnContainer.collapse6 > div { width: 20%; } 
    .columnContainer.collapse6 div:nth-child(5n+1) { clear: both; } 
} 

// Small/mobile size 
@media all and (max-width: 480px) { 
    .columnContainer > div { width: 100% } 
} 

Answer 1

그것 당신이 사업부에 display:inline-block을 추가하여 중간 크기의 float:left .. 을 가지고 있기 때문에 ..

@media all and (max-width: 767px) and (min-width: 481px) { 

.columnContainer { 
    width: 100%; 
    display:inline-block; 
    } 

    .columnContainer > div { 
    float:left; 
    width: 100%; 
    } 

다음은 업데이트 된 fiddle입니다.