column-count를 사용하면 해상도가 더 작 으면 동적으로 3에서 2 열로 변경할 수 있습니까?

Question

column-count 속성을 사용하여 3 개의 열에 여러 div가있는 페이지를 설정합니다. 큰 화면에서 크게 보입니다. 각 div의 고정 폭은 500px (포함 된 이미지)입니다.

그러나 작은 화면에서 작업하는 경우 브라우저는 두 개의 열로 이동해야 할 때 원래의 \ 3 열의 내용을 강제로 시도합니다. 콘텐츠가 겹쳐지기 시작할 때 콘텐츠를 두 열로 이동시키는 가장 좋은 방법이 있습니까? 당신이 column-width 재산보다는 column-count를 사용하는 경우 사용 가능한 공간을 채우기 위해 필요에 따라

Answer 1

는, 브라우저가 자동으로 열 수를 조정합니다.

http://codepen.io/cimmanon/pen/CcGlE

.foo { 
    columns: 500px; // shorthand, prefixes may be necessary 
} 

Answer 2

@media (max-width: 500px) { 
    .your element selector here { 
-webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count:   2; 

    } 
}