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

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

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

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>