Sütun doldurma - CSS Hileleri

İçindekiler

Çok sütunlu bir öğeye yükseklik eklediğinizde, içeriğin sütunları nasıl dolduracağını kontrol edebilirsiniz. İçerik dengelenebilir veya sırayla doldurulabilir.

ul ( height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; )

Bu özellik yalnızca Firefox'ta mevcuttur. Firefox, yüksekliği kısıtlı çok sütunlu bir düzende içeriği otomatik olarak dengeleyecektir. Diğer tarayıcılar, bir yükseklik kısıtlaması verildiğinde sütunları her zaman sırayla doldurur.

Firefox'un diğer tarayıcılar gibi davranmasını sağlamak, yani sütunları sırayla doldurmak için ayarlayabilirsiniz column-fill: auto.

Değerler

column-fillanahtar kelime değerlerini kabul eder balanceve auto.

balanceher bir sütunu yaklaşık aynı miktarda içerikle dolduracak, ancak sütunların height. heightTarayıcı içeriği yatay olarak eşit olarak dağıttığı için sütunların görünenden daha kısa çıkacağını fark edebilirsiniz .

autoulaşana kadar her sütunu doldurur heightve içeriği bitene kadar bunu yapar. İçerik göz önüne alındığında, bu değerin tüm sütunları doldurması veya eşit şekilde doldurması gerekmez.

Bardağa meyve suyu dökmek gibi bir şey. Her bardağa eşit miktarda meyve suyu dökebilir ve her bardağı üstüne kadar doldurmadığınızı görebilirsiniz ( balance). Alternatif olarak, bir bardağı dolana kadar doldurabilir ve meyve suyu kalmayana kadar bunu tekrarlayabilirsiniz. Sonuç olarak, kalan bardakların suyu daha az olabilir veya hiç olmayabilir ( auto).

CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem sütun doldurma örneğine (CSS-Püf Noktaları) bakın.

Tarayıcı Desteği

column-fillAnahtar kelime değerlerini özellikle Firefox'ta çalışır. Ağustos 2014'te bu Almanak girişi ilk yazıldığı zaman çalışmadılar, ancak Ağustos 2015'te tekrar test edildiğinde çalışıyorlar (Chrome 44). Bu test sırasında, değeri dinamik olarak değiştirmenin işe yaramayacağı anlaşılıyor, bir geçişi zorlamanız gerekiyordu.

Genel olarak çok sütunlu düzen için tarayıcı desteği: