Ostatnio edytowany:

column-fill

Autor: Virtual Patriot

Opis właściwości column-fill

Za pomocą właściwości column-fill możemy określić w jaki sposób kolejne kolumny, na które została podzielona treść interesującego nas elementu HTML powinny zostać wypełnione wspomnianą treścią.

Dodatkowe techniczne informacje o właściwości column-fill

przeznaczenie
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

Interpretacja właściwości column-fill

Firefox

tak, lecz z przedrostkiem -moz-

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 column-fill

balance

Opis

Wartość balance jest domyślną wartością właściwości column-fill.

Domyślnie kolejne kolumny, na które została podzielona treść elementu HTML są wypełnione równomiernie wspomnianą treścią (jeżeli jest to możliwe).

Przykład

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

Kolejne kolumny, na które została podzielona treść przykładowego elementu "div" są wypełnione równomiernie wspomnianą treścią (jeżeli jest to możliwe).

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 {
        column-count:3;
        -moz-column-count:3;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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>

auto

Opis

Za pomocą wartości auto właściwości column-fill możemy sprawić, że kolejne kolumny, na które została podzielona treść elementu HTML będą wypełniane w całości wspomnianą treścią (jeżeli jest to możliwe).

Gdy element HTML posiada poziomy tryb zapisu treści, wtedy wartość "auto" właściwości "column-fill" oddziałuje na element HTML tylko wtedy, gdy element HTML posiada konkretny rozmiar wysokości obszaru zawartości, który możemy określić, na przykład za pomocą właściwości height.

Gdy element HTML posiada pionowy tryb zapisu treści, wtedy wartość "auto" właściwości "column-fill" oddziałuje na element HTML tylko wtedy, gdy element HTML posiada konkretny rozmiar szerokości obszaru zawartości, który możemy określić, na przykład za pomocą właściwości width.

Przykład

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

Kolejne kolumny, na które została podzielona treść przykładowego elementu "div" są wypełnione w całości wspomnianą treścią (jeżeli jest to możliwe), ponieważ do wspomnianego elementu "div" została dodana właściwość "column-fill" wraz z wartością "auto".

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 {
        column-count:3;
        column-fill:auto;
        -moz-column-count:3;
        -moz-column-fill:auto;
        height:450px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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>