İşte basit bir üç sütunlu sınıf örneği:
.three-col ( -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; )Bunun gibi bir metin bloğuna uygulayabilirsiniz:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Misal
Pellentesque habitant morbi tristique senectus et netus et malesuada a turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt çeşni, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, akümsan porttitor, facilisis luctus, metus
Spesifikasyona göre her sütunun yüksekliğinin otomatik olarak dengelendiğini unutmayın.
Ayrıca, bu demo ve örnek kodun moz ve webkit sağlayıcı öneklerini kullandığını ve yalnızca Gecko (Firefox 1.5+, ve diğerleri) ve Webkit (Safari 3+, Chrome, ve diğerleri) tarayıcılarında çalıştığını unutmayın. Henüz bildiğim kadarıyla Internet Explorer veya Opera'da yerel destek yok.
İlgili Tüm Özellikler
.three-col ( -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap : 20px; -moz-column-rule-color: #ccc; -moz-column-rule-style: solid; -moz-column-rule-width: 1px; -webkit-column-rule-color: #ccc; -webkit-column-rule-style: solid ; -webkit-column-rule-width: 1px; )column-width(Öneklerle) öğesini de ayarlayabilirsiniz, ancak genellikle bunu otomatik olarak hesaplamasına izin vermek daha mantıklıdır.
Kural (bir çizgideki gibi "kural") boşluğu ortadan ikiye böler. A ile aynı değerleri kullanabilirsiniz border.
Metin bloklarınızın (oldukça küçük) bir tarayıcı penceresinden daha uzun olacak kadar çok uzun olmamasına dikkat edin, aksi takdirde bu, metnin tarayıcı penceresinden daha geniş olmasıyla aynı problemdir (okuma = berbat için ileri geri kaydırma). Ayrıca düşününtext-align: justify;
JavaScript Yedekleme
Bu A List Apart makalesinde sunulmuştur.