CSS3 열, 작은 너비의 경우 숫자 줄이기

Question

최소 열 너비로 CSS3 열을 사용할 수 있습니까? 컨테이너의 크기가 현재 열 수보다 작 으면 열 수가 감소합니다.

예 :이 HTML http://jsfiddle.net/3LStR/. 3 개의 열이 있습니다. .cols3 div의 너비가 400px 미만이면 두 열로 바뀌겠습니다.

이 참조를 찾았습니다 : http://www.w3schools.com/cssref/css3_pr_column-width.asp하지만 도움이되지 않았습니다.

<-----------------------> 

<-------><-------> 

그리고

<---------------> 

<-------> 

: 총 폭이 작은 경우 총 폭이 허용하는 경우 나는 세 개의 열을 원하는

는

<----------------------------------> 

<-------><-------><-------> 

그러나

, 나는 더 적은 열을 원하는 총 너비가 훨씬 큰 경우에도 여전히 3 개의 열만 있으면됩니다.

<------------------------------------------------------------> 

<-------><-------><-------> 

Answer 1

특히 윈도우가 아닌 컨테이너의 기초가 될 수 있다고 가정 할 때 미디어 쿼리를 사용하면 편리합니다.

컨테이너에 width:100%을 입력하고 늘이기를 멈추려는 곳의 (이 경우 600px)을 설정하십시오.

.cols3 { 
    width: 100%; 
    max-width: 600px; 
} 

는 최소 폭 ( 400px) 당신이 열을 표시 시작할을위한 미디어 쿼리에 열 설정 랩 : 마지막으로

@media (min-width: 400px) { 
    .cols3 { 
    -webkit-column-count: 2; 
    -webkit-column-gap: 20px; 
    -webkit-column-rule: 1px solid #000; 

    -moz-column-count: 2; 
    -moz-column-gap: 20px; 
    -moz-column-rule: 1px solid #000; 

    column-count: 2; 
    column-gap: 20px; 
    column-rule: 1px solid #000; 
    } 
} 

, 최대 열 수에 대한 마지막 중단 점을 설정

@media (min-width: 600px) { 
    .cols3 { 
    -webkit-column-count: 3; 
    -moz-column-count: 3; 
    column-count: 3; 
    } 
} 

예 : 0 당신은 적당한 크기 당신이 (600px를) 원하는에서 원하는 1,

코드 :http://jsfiddle.net/shshaw/A6vjv/

다시, 이것은 윈도우 폭 아닌 실제 컨테이너 폭을 기반으로합니다. 문서의 컨테이너 스타일과 배치에 따라 조정해야 할 수도 있습니다. 그렇지 않으면 컨테이너만으로 중단 점을 수행하는 멋진 자바 스크립트가 필요합니다.