CSS Çok Sütun

CSS çoklu sütun düzeni

CSS çoklu sütun düzeni, bizim gazeteler gibi çoklu metin tanımlamamızı kolaylaştırır:

Three Kingdoms Romance

İlk Bölüm
Yuan Tao'da kahramanlar üç kez dostluk kurdular

Dünyanın büyük olayları, uzun süre ayrıldıktan sonra bir araya gelmeli, uzun süre bir araya geldikten sonra ayrılmalıdır: Zhou dininin sonunda yedi ülke ayrıldı ve Qin'e katıldı; Qin'in ortadan kalkmasından sonra, Chu ve Han ayrıldı ve tekrar Han'a katıldı; Han Hanlığı, Kaozu'nun siyanın başını keserek ayaklanmasıyla birleşti, tüm dünyayı birleştirdi, daha sonra Guangwu'nun yeniden dirilmesi, Xian Di'ye kadar ulaştı ve sonunda üç ülkeye bölündü. Karışıklığın nedenlerini araştırırken, büyük olasılıkla Huan, Ling iki imparatorundan başladı. Huan İmparatoru, iyi insanları bağlamak, eunuchlara inanmakta idi. Huan İmparatoru'nun ölmesinden sonra, Ling İmparatoru tahta çıktı, Büyük General Dou Wu, Tai Fu Chen Fan, birlikte yardımcı oldular; o sırada eunuch曹节 gibi güç sahibi olanlar vardı, Dou Wu ve Chen Fan onları öldürmek istedi, gizli işler gizli tutulmadı, aksine onlar tarafından öldürüldüler, Zhong Niu'dan bu yana daha çok yatıştırıldı. Jian Ning ikinci yılında Nisan ayı dolunay günü, İmparator Wen De Sarayı'na geldi. Koltuğa otururken, sarayın köşesinden şiddetli bir rüzgar fırtınası başladı, bir büyük mavi yılan, kattan aşağı uçtu ve sandalyeye sarıldı. İmparator şaşkınlıkla yere yığıldı, yanlarındaki insanlar acil olarak sarayın içine kurtardı, tüm bakanlar kaçtı. Bir süre sonra yılan ortadan kayboldu. Aniden büyük bir fırtına, büyük bir yağmur ve hatta don dolu yağmur başladı, gece yarısına kadar durmadı ve birçok evi yıktı. Jian Ning dördüncü yılında Şubat ayı, Luoyang deprem oldu; deniz suyu da sızdı, kıyı halkı, büyük dalgalarla denize sürüklendi. Guanghe birinci yılında, dişi tavuk dişi haline geldi. Haziran ayı başında, on metrelik kara bulutlar, Wen De Sarayı'na girdi. Yaz Temmuz ayında, Yutu Taohang'da bir yıldız çıktı, Wuyuan Shan kıyıları, hepsi çöktü. Çok sayıda olumsuz olay, sadece bir tarafı değil. İmparator, halkın neden felaketler yaşadığını sordu, Yiwang Cai Yong, bir dilekçe sundu, yıldızın düştüğü ve tavuğun dişi haline geldiği, kadın ve erkeklerin hükümete müdahale ettiği nedenle olduğunu düşündü, konuşmaları oldukça keskin ve doğrudan idi. İmparator, dilekçeyi okurken nefes kesildi, daha sonra tuvalete gitti. Eunuch曹节 arkada gizlice izledi, herkesin önünde bildirdi; daha sonra Cai Yong'u suçlandırdı ve tarlalara gönderdi. Sonra Zhang Rang, Zhao Zhong, Feng Yu, Duan Gui, Cao Jie, Hou Luan, Jie Shuo, Cheng Kuang, Xia Yun, Guo Sheng on kişilik kötü niyetli bir grup,

...... ......

CSS Çok Sütun Özellikleri

Bu bölümde aşağıdaki çok sütun özelliklerini öğreneceksiniz:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

Tarayıcı Desteği

Tabloda belirtilen rakamlar, bu özelliği tamamen destekleyen ilk tarayıcı sürümünü gösterir.

Özellik Chrome IE Firefox Safari Opera
column-count 50.0 10.0 52.0 9.0 37.0
column-gap 50.0 10.0 52.0 9.0 37.0
column-rule 50.0 10.0 52.0 9.0 37.0
column-rule-color 50.0 10.0 52.0 9.0 37.0
column-rule-style 50.0 10.0 52.0 9.0 37.0
column-rule-width 50.0 10.0 52.0 9.0 37.0
column-span 50.0 10.0 71.0 9.0 37.0
column-width 50.0 10.0 52.0 9.0 37.0

CSS Çok Sütun Oluşturma

column-count Özellik, elementin kaç sütuna bölünmesi gerektiğini belirtir:

Aşağıdaki örnek, <div> elementindeki metni 3 sütuna böler:

Örnek

div {
  column-count: 3;
}

Deneyin

CSS Sütun Aralığı Belirleme

column-gap Özellik, sütun aralarındaki boşluğu belirtir:

Aşağıdaki örnek, sütun aralarındaki boşluğu 40 piksel olarak belirler:

Örnek

div {
  column-gap: 40px;
}

Deneyin

CSS Sütun Kuralları

column-rule-style Özellik, sütun aralarındaki kuralların tarzını belirtir:

Örnek

div {
  column-rule-style: solid;
}

Deneyin

column-rule-width Özellik, sütun aralarındaki kuralların genişliğini belirtir:

Örnek

div {
  column-rule-width: 1px;
}

Deneyin

column-rule-color Özellik, sütun aralarındaki kuralların rengini belirtir:

Örnek

div {
  column-rule-color: lightblue;
}

Deneyin

column-rule özelliği, yukarıdaki tüm column-rule-* özelliklerini ayarlamak için kısa özellik.

Aşağıdaki örnek, sütun aralarındaki kuralların genişliğini, tarzını ve rengini ayarlar:

Örnek

div {
  column-rule: 1px solid lightblue;
}

Deneyin

Elementin ne kadar sütun geçmesini belirtmelidir

column-span Özellik, elementin kaç sütunu geçmesini belirtir.

Aşağıdaki örnek, <h2> elementinin tüm sütunları geçmesini belirtir:

Örnek

h2 {
  column-span: all;
}

Deneyin

Sütun genişliğini belirtin

column-width Özellik, sütunlara önerilen en iyi genişliği belirtir.

Aşağıdaki örnek, sütunun önerilen en iyi genişliğinin 100px olmasını belirtir:

Örnek

div {
  column-width: 100px;
}

Deneyin

CSS Çok Sütun Özellikleri

Aşağıdaki tablo, tüm çok sütun özelliklerini listeler:

Özellik Açıklama
column-count Elementin bölünmesi gereken sütun sayısını belirtin.
column-fill Sütunları nasıl doldurulacağını belirtin.
column-gap Sütun aralarındaki boşluğu belirtin.
column-rule Tüm column-rule-* özelliklerini ayarlamak için kısa özellik.
column-rule-color Sütun aralarındaki kuralların rengini belirtin.
column-rule-style Sütun aralarındaki kurallar tarzını belirtin.
column-rule-width Sütun aralarındaki kurallar genişliğini belirtin.
column-span Bir elemanın kaç sütun geçmesini gerektiğini belirtir.
column-width Sütunlara en iyi genişliği belirlemek için.
columns column-width ve column-count için kısa yazım özellikleri.