Home-theater-designers
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.
GÜNÜN MAKALE VİDEOSU İÇERİKLE DEVAM ETMEK İÇİN KAYDIRIN
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:
.container {
column-count: 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 , içinde , 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:
.container {
column-count: 3;
column-width: 200px;
}
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:
.container {
column-count: 3;
column-gap: 20px; /* sets the gap between columns to 20 pixels */
}
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ği ve 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.
telefonu usb ile lg tv'ye nasıl bağlarım
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.
en iyi ücretsiz tam sürüm yazılım indirme siteleri
İşte nasıl kullanılacağına dair bir örnek sütun dolgusu çok sütunlu düzende sütunları dengeleme özelliği:
.multi-column-layout {
column-count: 3;
column-gap: 20px;
column-fill: balance;
}
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.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSScolumns.css" />
</head>
<body>
<!-- Container Element -->
<div class="magazine-layout">
<!-- Child Elements -->
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
</div>
</body>
</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:
.magazine-layout {
column-count: 3;
column-width: 300px;
column-gap: 20px;
column-fill: balance;
}
.article {
background-color: #f8f8f8;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 10px;
break-inside: avoid-column;
}
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:
.container {
/* Fallback for browsers that do not support column-count */
width: 100%;
}
/* Detect support for column-count */
@supports (column-count: 3) {
.container {
column-count: 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 duyarlı ç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, farklı kullanıcı tercihlerine ve cihaz boyutlarına uyum sağlayan daha da gelişmiş ve dinamik düzenler oluşturarak web içeriğinizi kullanıcılarınız için daha erişilebilir ve ilgi çekici hale getirebilirsiniz.