6XC

CSS Çok Sütunlu Metin Oluşturucu

Metni gazete tarzı sütunlara akıtın — sütun sayısı, boşluk ve ayraç çizgisi — canlı önizleme ve CSS ile.

789 görüntülenme

Çok sütunlu yerleşim, uzun metinleri gazete sayfası gibi yan yana akıtır. Sütun sayısını ve boşluğu değiştirdikçe bu örnek metin anında yeniden akar. Ayraç çizgisini açarak sütunlar arasına ince bir çizgi de ekleyebilirsiniz. Uzun makalelerde satır uzunluğunu kısalttığı için okumayı kolaylaştırır. Çok sütunlu yerleşim, uzun metinleri gazete sayfası gibi yan yana akıtır. Sütun sayısını ve boşluğu değiştirdikçe bu örnek metin anında yeniden akar. Ayraç çizgisini açarak sütunlar arasına ince bir çizgi de ekleyebilirsiniz. Uzun makalelerde satır uzunluğunu kısalttığı için okumayı kolaylaştırır.

CSS Çok Sütunlu Yerleşim

column-count bir bloğun içeriğini eşit gazete sütunlarına böler; column-gap aralığı belirler, column-rule ayraç çizgisi çizer (border ile aynı söz dizimi). Metin sütundan sütuna kendiliğinden akar — uzun makaleler, footer'lar ve dizin listeleri için idealdir. Sütunlar arasında bölünmesin istediğiniz öğelere break-inside: avoid verin.

Sıkça Sorulan Sorular

column-count mu column-width mü?

column-count sütun sayısını sabitler; column-width tarayıcının en az o genişlikte sığdırabildiği kadar sütun açmasına izin verir — duyarlı yerleşimde daha iyidir. İkisi birlikte de kullanılabilir.

Bir öğenin sütunlar arasında bölünmesini nasıl önlerim?

break-inside: avoid; verin — kart, açıklamalı görsel ve liste öğelerinde işe yarar.

Benzer Araçlar

CSS Gradient Oluşturucu Doğrusal, dairesel ve konik CSS degradelerini canlı önizlemeyle tasarlayın, kodu kopyalayın. Oluştur CSS Box Shadow (Gölge) Oluşturucu Kutu gölgesini görsel olarak tasarlayın — kaydırma, bulanıklık, yayılma, renk, opaklık ve inset — canlı önizlemeli. Oluştur CSS Border Radius Oluşturucu Köşeleri tek tek veya hep birlikte, px ya da % olarak yuvarlayın — canlı önizleme ve kopyalanabilir CSS. Oluştur CSS Text Shadow (Yazı Gölgesi) Oluşturucu Yazı gölgesini kaydırma, bulanıklık, renk ve opaklıkla tasarlayın — örnek metin üzerinde canlı önizleme. Oluştur