Sütun sayımıyla, çözünürlük daha küçükse dinamik olarak 3 ila 2 sütun değiştirebilir misiniz?

Question

Üç sütunda birden çok div içeren bir sayfayı ayarlamak için column-count özelliğini kullanıyorum; bu, büyük ekranlarda harika görünüyor. Her div, 500px (içerilen görüntüler) gibi sabit bir genişliğe sahiptir.

Ancak, daha küçük ekranlarda çalışırken, tarayıcı içeriği iki sütuna gitmesi gerektiğinde orijinal üç sütun içinde zorlamaya çalışır. İçerik çakışmaya başladığında içeriğin iki sütuna gitmesini sağlamak için tercih edilen en iyi yöntem var mı?

Answer 1

column-count yerine, column-width özelliğini kullanırsanız, tarayıcı, kullanılabilir alanı doldurmak için gerektiğinde sütun sayısını otomatik olarak ayarlayacaktır.

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; 

    } 
}