Za pomocą właściwości columns oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech kolumn, na które powinna zostać podzielona treść interesującego nas elementu HTML.
/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */
/* REGUŁA - 1 */
div {
columns:150px 6;
}
/* REGUŁA - 2 */
div {
column-width:150px;
column-count:6;
}
- width
-
Składnik width nie jest wymaganym składnikiem grupy wartości właściwości columns. Składnik width określa wartość właściwości column-width, czyli sugerowany rozmiar szerokości każdej kolejnej pojedynczej kolumny, na które powinna zostać podzielona treść interesującego nas elementu HTML.
- count
-
Składnik count nie jest wymaganym składnikiem grupy wartości właściwości columns. Składnik count określa wartość właściwości column-count, czyli maksymalną ilość kolumn, na które może zostać podzielona treść interesującego nas elementu HTML.
columns:200px 6;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
Sugerowanym rozmiarem szerokości każdej kolejnej kolumny, na które została podzielona treść przykładowego elementu "div" jest rozmiar równy 200 pikseli, natomiast maksymalną ilością kolumn, na które może zostać podzielona treść przykładowego elementu "div" jest ilość równa liczbie 6, ponieważ do wspomnianego elementu "div" została dodana właściwość "columns" wraz z następującą grupą wartości: "200px 6".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
columns:200px 6;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
</div>
</body>
</html>