CSS3 Çok sütunlu Düzeni
CSS3 çok sütunlu düzeni metnin birden çok sütun kolay tanımını verir - sadece gazetelerde şöyle:
Günlük Ping
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar ardından -webkit- veya -moz- bir önek ile çalıştığım ilk versiyonunu belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| column-count | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-gap | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule-color | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-style | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
CSS3 Çok sütunlu Özellikleri
Bu bölümde aşağıdaki çok sütunlu özellikleri hakkında öğreneceksiniz:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
Çoklu Sütunlar oluşturun CSS3
column-count özelliği bir eleman bölünmelidir sütun sayısını belirtir.
Aşağıdaki örnek metni böler <div> 3 sütun halinde element:
Örnek
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Kendin dene " Sütunlar Arasındaki Mesafeyi belirtin CSS3
column-gap özelliği sütunlar arasındaki boşluğu belirtir.
Aşağıdaki örnek, sütunlar arasında bir 40 piksel boşluğu belirtir:
Örnek
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Kendin dene " CSS3 Sütun Kuralları
column-rule-style mülkiyet sütunlar arasındaki kuralının stilini belirtir:
Örnek
div
{
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
Kendin dene " column-rule-width özelliği sütunlar arasındaki kural genişliğini belirtir:
Örnek
div
{
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
Kendin dene " column-rule-color özelliği sütunlar arasındaki kural rengini belirtir:
Örnek
div
{
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
Kendin dene " column-rule mülkiyet üzerindeki tüm kolon-rule- * özelliklerini ayarlamak için bir kestirme niteliktir.
Aşağıdaki örnek sütunlar arasındaki kural genişliğini, stilini ve rengini ayarlar:
Örnek
div
{
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
Kendin dene " Kaç Sütunlar bir Eleman Meli Açıklık belirtin
column-span mülkiyet unsuru genelinde yayılan kaç sütun belirtir.
Aşağıdaki örnek belirtir <h2> eleman tüm sütunda da olmalıdır:
Sütun genişliğini belirtir
column-width özelliği sütunlar için önerilen bir optimal genişliğini belirtir.
Aşağıdaki örnek, sütunlar için önerilen, uygun genişlik 100 piksel olması gerektiğini belirtir:
Örnek
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
Kendin dene " CSS3 Çok sütunlar Özellikleri
Aşağıdaki tabloda tüm çoklu sütunlar özelliklerini listeler:
| özellik | Açıklama |
|---|---|
| column-count | bir eleman bölünmüş olmalıdır sütun sayısını belirtir |
| column-fill | Sütunları nasıl doldurulacağını belirler |
| column-gap | sütunlar arasındaki boşluğu belirler |
| column-rule | tüm sütun-rule- * özelliklerini ayarlamak için bir stenografi özelliği |
| column-rule-color | sütunlar arasındaki kural rengini belirtir |
| column-rule-style | sütunlar arasındaki kuralın stilini belirtir |
| column-rule-width | sütunlar arasındaki kural genişliğini belirtir |
| column-span | Bir öğe genelinde yayılan kaç sütun belirtir |
| column-width | sütunlar için önerilen bir optimum genişliğini belirtir |
| columns | Sütun genişliği ve sütun sayısı olarak ayarlanması için bir kestirme özelliği |