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

element HTML, którego treść może oraz została podzielona na kolumny oraz który nie posiada automatycznego rozmiaru wysokości logicznej obszaru zawartości

pozycja

dowolna

dziedziczenie

nie

wartość initial

balance

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości column-fill

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

  column-fill:balance;
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;
        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>

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

Przykład

  column-fill:auto;
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;
        height:450px;
        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>