Ostatnio edytowany:

columns

Autor: Virtual Patriot

Opis właściwości columns

Za pomocą właściwości columns możemy określić kilka różnych cech kolumn, na które powinna zostać podzielona treść interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości columns

przeznaczenie
dziedziczenie

nie

wartość initial

auto auto

wyjątki initial

brak

animowanie

tak samo jak dla poszczególnej właściwości CSS, której wartość tworzy poszczególny składnik grupy wartości właściwości columns

Interpretacja właściwości columns

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości columns

grupa wartości

Opis

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;
}

Składniki grupy wartości właściwości columns

Ważne

podana przez nas grupa wartości właściwości columns nie może zawierać wartości globalnych

Przykładowe zapisy

200px

4

200px 4

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.

Wartość domyślna

auto

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.

Wartość domyślna

auto

Przykład

  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".

Kod źródłowy przykładu

<!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:#CBFFFF;
      }
    </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>