CSS Çok Sütunlu Düzen modülü, web sayfalarınız için kolayca çok sütunlu düzenler oluşturmanıza olanak tanıyan güçlü bir araçtır. Duyarlı tasarımın yükselişi, bu modülün nasıl kullanılacağını anlamanın önemli olduğu anlamına gelir.
Farklı ekran boyutlarına uyum sağlayan esnek ve dinamik düzenler oluşturmak için sütun özelliklerini kullanabilirsiniz.
Sütun Numarasını, Genişliği ve Boşluğu Belirtme
Sayfa içeriğiniz için uygun bir çok sütunlu düzen oluşturmak için, sayfanın kaç sütuna yayılmasını istediğinize karar vererek başlamalısınız. Çoklu sütun modülündeki en önemli özelliklerden biri, sütun sayısı içeriğin bölüneceği sütun sayısını ayarlamak için kullandığınız özellik.
Örneğin:
.konteyner {
sütun sayısı: 3;
}
Sütunların genişliğini ve boşluğunu da belirleyebilirsiniz. Herhangi birini kullanarak sütun genişliği değerini ayarlayabilirsiniz. desteklenen CSS birimleri beğenmek piksel, em, veya %.
Eğer sütun genişliği ayarlandı Oto, tarayıcı her sütunun genişliğini temel alarak hesaplayacaktır. sütun sayısı özellik ve mizanpajınızın içindeki kullanılabilir alan.
Örneğin, bu CSS beyan eder 3 her birinin genişliğine sahip sütunlar 200 piksel:
.konteyner {
sütun sayısı: 3;
sütun genişliği: 200piksel;
}
bu sütun aralığı özelliği, çok sütunlu bir düzende sütunlar arasındaki boşluğu veya boşluğu belirtir. Bitişik sütunlar arasındaki boş boşlukların boyutunu ayarlar ve piksel, ems veya diğer desteklenen birimler cinsinden bir uzunluk değeri alabilir.
Örneğin:
.konteyner {
sütun sayısı: 3;
sütun aralığı: 20piksel; /* sütunlar arasındaki boşluğu 20 piksel olarak ayarlar */
}
Varsayılan olarak, değeri sütun aralığı ayarlandı normal. Tarayıcınız, görsel olarak hoş kalırken mizanpajınızdaki sütunlar arasında tutarlı boşluk elde etmek için bu değeri seçer. Bu değer ayrıca tarayıcılar arasında değişebilir ve ayrıca yazı tipi boyutuna, satır yüksekliğine, konum özelliğive sütun içeriğinin diğer düzen özellikleri.
Sütun Dengesini Sağlama
CSS sütunları, bir düzen içindeki tüm kullanılabilir alanı doldurmaya çalışır. Bu bazen önemli ölçüde farklı yüksekliklere sahip sütunlara neden olabilir ve bu da düzenin düzensiz görünmesine neden olabilir.
Sütunları dengelemek için mizanpajınızdaki her sütunun yaklaşık olarak aynı miktarda içeriğe sahip olduğundan emin olmalısınız.
CSS'yi ayarlayarak bunu başarabilirsiniz. sütun dolgusu mülkiyet denge. Ardından bir tarayıcı, içeriği kabaca aynı yükseklikte olacak şekilde tüm sütunlara eşit olarak dağıtmaya çalışır.
bu sütun dolgusu özellik şu şekilde ayarlandı: denge varsayılan olarak, ancak bir değer Oto bu davranışı değiştirecek. Otomatik'in kullanılması, içeriği kullanılabilir alana göre sütunlara dağıtır. Bu, sütunlar arasında eşit olmayan boşluklara ve eşit olmayan sütun yüksekliklerine neden olabilir. Boş sütunlu bir düzen bile üretebilir.
İşte nasıl kullanılacağına dair bir örnek sütun dolgusu çok sütunlu düzende sütunları dengeleme özelliği:
.çok sütunlu düzen {
sütun sayısı: 3;
sütun aralığı: 20piksel;
sütun dolgusu: denge;
}
Bu örnekte, üç sütunlu ve her sütun arasında 20 piksel boşluk bulunan çok sütunlu bir düzenimiz var. ayarlayarak sütun dolgusu mülkiyet denge, içeriğin sütunlar arasında eşit olarak dağılmasını sağlayarak dengeli sütun yükseklikleri sağlarız.
Şuna dikkat etmek önemlidir: sütun dolgusu özelliği tüm düzenler için iyi çalışmayabilir ve sütunlar arasında eşit olmayan boşluklara neden olabilir. Bu gibi durumlarda, sütunları manuel olarak dengelemek için JavaScript kullanmanız gerekebilir. En iyi uygulamaları takip etmeyi unutmayın ve aşamalı geliştirme kullan böylece JavaScript'e güvenmezsiniz.
Hepsini bir araya koy
Bir mizanpajı CSS sütunlarıyla uygulama hakkında öğrendiğiniz her şeyi bir araya getirebilir ve dergi tarzı bir mizanpaj oluşturmak için kullanabilirsiniz.
İlk olarak, temel HTML yapısını oluşturun. İçeriğinizi sarmak için bir kapsayıcı öğe kullanın, ardından sütunlar halinde yerleştirebileceğiniz birkaç alt öğe oluşturun.
html>
<html>
<KAFA>
<bağlantırel="stil sayfası"href="CSScolumns.css" />
KAFA>
<vücut>
Konteyner Elemanı
<divsınıf="dergi düzeni">Alt Öğeler
<divsınıf="madde">
<h2>Makale başlığıh2><P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.P>
div><divsınıf="madde">
<h2>Makale başlığıh2><P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.P>
div><divsınıf="madde">
<h2>Makale başlığıh2><P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.P>
div>
div>
vücut>
html>
CSS Çoklu sütun modülünü kullanarak dergi stili bir düzen oluşturmak için sütun sayısı, sütun genişliği, sütun aralığı, Ve sütun dolgusu özellikler:
.dergi düzeni {
sütun sayısı: 3;
sütun genişliği: 300piksel;
sütun aralığı: 20piksel;
sütun dolgusu: denge;
}
.madde {
arka plan rengi: #f8f8f8;
sınır yarıçapı: 4piksel;
kutu gölgesi: 0 2piksel 4pikselrgba(0, 0, 0, 0.1);
dolgu malzemesi: 10piksel;
hırsızlık: kaçınma sütunu;
}
Bu örnek aynı zamanda hırsızlık üzerindeki mülk .madde değeri ile sınıf kaçınma sütunu. Bu özellik, her makalenin birden çok sütuna bölünmek yerine tek bir sütunda kalmasını sağlar. Düzen şu şekilde görünmelidir:
Desteklenmeyen Tarayıcılar için Yedekleri Kullanma
Şuna dikkat etmek önemlidir: sütun sayısı özelliği tüm tarayıcılarda desteklenmez. Desteklemeyen tarayıcılar sütun sayısı, bunun yerine içeriği tek bir sütunda görüntüler.
Desteklenmeyen tarayıcılar için yedek stiller sağlamak üzere, aşağıdaki gibi özellik sorgularını kullanabilirsiniz: @destekler desteğini tespit etmek için sütun sayısı özellik desteklenmediğinde alternatif stiller sağlar.
Örneğin:
.konteyner {
/* Sütun sayısını desteklemeyen tarayıcılar için yedek */
Genişlik: 100%;
}
/* Sütun sayısı desteğini algıla */
@destekler (sütun sayısı:3) {
.konteyner {
sütun sayısı: 3;
}
}
Bu örnekte, @destekler desteğini algılamak için özellik sorgusu sütun sayısı mülk. Tarayıcı sütun sayısını destekliyorsa, konteyner eleman üç sütunda görüntülenecektir. Tarayıcı sütun sayısını desteklemiyorsa, içeriği kullanarak tek bir sütunda görüntüler. Genişlik mülk.
İçeriği Sütunlara Bölme
Genel olarak, CSS sütunları, web içeriğinin kullanılabilirliğini ve kullanıcı deneyimini geliştiren esnek ve yanıt veren çok sütunlu düzenler oluşturmak için pratik ve güçlü bir yol sağlar.
CSS sütunlarını ve JavaScript'i birlikte kullanarak, uyum sağlayan daha karmaşık ve dinamik düzenler oluşturabilirsiniz. farklı kullanıcı tercihlerine ve cihaz boyutlarına göre web içeriğinizi kullanıcılarınız için daha erişilebilir ve ilgi çekici hale getirir.