CSS3 Sütunları Nasıl Kullanılır

Monitör boyutlarında artan çeşitlilik ile, ekranın tüm genişliğini alan tek bir metin bloğu tasarlamak pratik değildir. Geleneksel çözüm, metni çok zaman yoğun olan sütunlara manuel olarak ayırmaktır; veya evrensel olarak çalışmayan JavaScript ile dinamik olarak metin ayırmak. Ayrıca bu bir sunum meselesidir, ızgara sistemleri kullanılmadan CSS ile stil yapabilmeli veya yapmamalıyız?

CSS3 aslında metninizi çeşitli sütunlara göre şekillendirmenin bir yolunu sağlar, hatta bir oluk açma yeteneğini verir - bu sütunlar arasındaki boşluk - bu şekilde sizin için boşlukları ayarlayan çerçeve veya ızgara sistemi yerine tam kontrole sahipsiniz. .

Hepsinden iyisi, CSS3 incelikle düşer, yani birisi Netscape Navigator'da gezinirse siteniz kırılmaz.

Tarayıcı Desteği

Mevcut tüm tarayıcıların CSS3'teki çoklu sütunları desteklerken, evet IE10 bile - birçok yeni sürümünün - örneğin IE9'un - bunu yapmamaları önemlidir. Destek iyi olsa da, webkit (-webkit-) ve mozilla (-moz-) için tarayıcı öneklerini dahil etmek isteyeceksiniz. IE ve Opera için -ms- veya -o- özelliğini içermesi gerekmediğinden, ya özelliği tam olarak destekliyor ya da hiç desteklemiyor.

Özellikleri

Bu CSS özelliği, içeriğinizin tarayıcıda nasıl yazdırıldığı konusunda tam bir kontrol sağlamak için size bir miktar özellik sunar ve bu özellikler şunlardır:

• sütun sayısı: Burada öğeye uygulamak istediğiniz sütun sayısını belirtirsiniz.
• sütun genişliği: tek bir sütunun genişliği. Bu değerin tarayıcı tarafından muhtemelen değişeceğini unutmayın.
• sütun aralığı: sütunlar arasındaki boşluğun genişliği.
• sütun-kural genişliği: kural kısmı sütunlarınız için bir sınırdır ve burada o sınırın genişliğini belirtirsiniz.
• sütun-kural stili: stili belirtmeniz gerekiyorsa, kenarlık gibi.
• sütun-kural-renk: burada kuralın rengi.
• sütun-aralığı: burada değer, bir elemanın kaç tane sütun açacağını söyleyecektir, bu, başlıklar için iyi ve tablolarda colspan ve rowspan gibi çalışır.

Tüm bu özelliklerle, sütunlarımız üzerinde tam kontrole sahip olmak için başka bir şeye ihtiyacımız olduğunu düşünmüyorum. Tabii ki, bu özelliklerin hepsi, çoklu sütun mizanpajının çalışması için gerekli değildir, aslında sadece sütun sayımı gereklidir, ancak her zaman, aynı zamanda, metni küçük bir odaya vermek için sütun boşluğunu da kullanmanız gerekir. birbirinin tepesi.

Bunu uygulamaya koymak için sadece iki satırlık kod gerekir:

/* This will produce a 3 column layout with a gap of 20px between each column */.cols3 {column-count: 3;column-gap: 20px;}

Ayrıca, sütunlara bir kural uygulamak isterseniz, yalnızca ekstra özellikleri eklemeniz gerekir:

/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */.cols3 {column-count: 3;column-gap: 20px;column-rule-width: 1px;column-rule-style: solid;column-rule-color: #000;}

Daha yaygın sınır özelliği gibi, renk, stil ve genişliği aynı satırda da oluşturabilirsiniz.

.cols3 {column-count: 3;column-gap: 20px;column-rule: 1px solid #000;}

Bir başlığınız varsa ve o başlığı tüm satırları genişletmek istiyorsanız, yalnızca bir satır ekleyin:

/*This h1 will take up the space of the 3 columns*/.cols3 h1{column-span: all;}

gösteri

Bunu, herhangi bir HTML'ye, tek bir paragraftan birden çokya uygulayabilirsiniz.