Kolumny CSS3, zmniejsz liczbę przy małej szerokości - css3, responsive-design, width, multiple-columns

Czy możliwe jest użycie kolumn CSS3 o minimalnej szerokości kolumny; tak, że jeśli rozmiar kontenera jest mniejszy niż bieżąca liczba kolumn, że liczba kolumn jest zmniejszona?

Na przykład ten HTML http://jsfiddle.net/3LStR/. Istnieją 3 kolumny. Chcę, aby zmieniło się w dwie kolumny, jeśli szerokość .cols3 div ma mniej niż 400 pikseli;

Znalazłem to odniesienie: http://www.w3schools.com/cssref/css3_pr_column-width.asp ale to nie pomogło.

Chcę trzy kolumny, jeśli pozwala na to całkowita szerokość,

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

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

Ale jeśli całkowita szerokość jest mniejsza, chcę mniej kolumn:

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

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

I

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

<------->

A jeśli całkowita szerokość jest znacznie większa, nadal chcę tylko trzy kolumny:

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

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

Odpowiedzi:

3 dla odpowiedzi № 1

Zakładając, że możesz po prostu oprzeć kolumny o szerokości okna, a nie kontenera, tutaj przydatne są Zapytania o media.

Daj swój pojemnik width:100% a następnie ustaw max-width gdzie chcesz, żeby przestał się rozciągać, w tym przypadku 600px.

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

Zawiń konfigurację kolumny w zapytaniu o media o minimalnej szerokości (400px) chcesz, aby kolumny zaczęły wyświetlać:

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

Na koniec ustaw swój ostatni punkt przerwania dla maksymalnej liczby kolumn o odpowiednim rozmiarze (600px):

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

Przykład: http://jsfiddle.net/shshaw/A6vjv/show/

Kod: http://jsfiddle.net/shshaw/A6vjv/

Ponownie, jest to oparte na szerokości okna, a nie narzeczywista szerokość pojemnika. Konieczne może być dostosowanie w zależności od stylów i położenia kontenera w dokumencie. W przeciwnym razie będziesz potrzebować fantazyjnego javascript, aby wykonać punkty przerwania na podstawie samego kontenera.

---