column-span

Za pomocą właściwości column-span możemy ustalić, czy dany element HTML znajdujący się w elemencie, którego zawartość została podzielona na kolumny, ma zostać rozciągnięty na całą szerokość kolumn.

Dostępne wartości dla właściwości column-span

Wartość Opis
all szerokość elementu, znajdującego się w zawartości kolumn, zostanie rozciągnięta na szerokość wszystkich kolumn
none szerokość elementu, znajdującego się w zawartości kolumn, nie zostanie rozciągnięta na szerokość wszystkich kolumn

Interpretacja właściwości column-span

Przeglądarki Interpretacja
Firefox nie
Google Chrome
-webkit-
tak
Safari
-webkit-
tak
Opera
-webkit-
tak
Internet Explorer 10+ tak, lecz od wersji 10
Właściwość column-span pojawiła się od specyfikacji CSS3
Zobacz więcej informacji o interpretacji - układu kolumnowego CSS3

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

Informacja Adnotacja
przeznaczenie Właściwość column-span możemy dodać do każdego elementu HTML. Efekt jest widoczny dla elementów blokowych.
dziedziczenie brak
wartość inherit jest
wartość domyślna none
Możliwe wyjątki: brak
animowanie nie

all

all - szerokość danego elementu HTML, który znajduje się w elemencie, którego zawartość jest dzielona na kolumny, zostanie rozciągnięta na całą szerokość tych kolumn.

Przykład

szerokość tego elementu - p - została rozciągnięta na całą szerokość wszystkich kolumn

zawartość tego elementu - div - została podzielona na trzy kolumny zawartość tego elementu - div - została podzielona na trzy kolumny zawartość tego elementu - div - została podzielona na trzy kolumny zawartość tego elementu - div - została podzielona na trzy kolumny
element p, który znalazł się w zawartości swojego elementu div rodzic, którego to zawartość została podzielona na kilka kolumn, zajął całą jego szerokość, ponieważ do wspomnianego elementu p została dodana właściwość column-span wraz z wartością all

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      body {
        font-family:Helvetica, sans-serif;
        font-size:1.3em;
      }

      div {
        padding:15px;
        background-color:#DFF;
        column-count:3;
        -moz-column-count:3; /* zapis dla przeglądarki Firefox */
        -webkit-column-count:3; /* zapis dla przeglądarki Google Chrome, Safari, Opera 15+ */
      }

      p {
        background-color:#5DD;
        column-span:all;
        -webkit-column-span:all; /* zapis dla przeglądarki Google Chrome, Safari, Opera 15+ */
      }
    </style>
  </head>

  <body>

    <div>
      <p>szerokość tego elementu - p - została rozciągnięta na całą szerokość wszystkich kolumn</p>
      to jest przykładowy tekst, który wypełnia zawartość elementu - p - który został wykorzystany w tym przykładzie
      to jest przykładowy tekst, który wypełnia zawartość elementu - p - który został wykorzystany w tym przykładzie
      to jest przykładowy tekst, który wypełnia zawartość elementu - p - który został wykorzystany w tym przykładzie
      to jest przykładowy tekst, który wypełnia zawartość elementu - p - który został wykorzystany w tym przykładzie
    </div>

  </body>
</html>

none

none - szerokość elementu HTML, znajdującego się w zawartości kolumn, nie zostanie rozciągnięta na całą szerokość wszystkich kolumn. Jest to wartość domyślna.

Przykład

szerokość tego elementu - p - nie została rozciągnięta na całą szerokość wszystkich kolumn

to jest przykładowy tekst, który wypełnia zawartość elementu - p - który został wykorzystany w tym przykładzie to jest przykładowy tekst, który wypełnia zawartość elementu - p - który został wykorzystany w tym przykładzie to jest przykładowy tekst, który wypełnia zawartość elementu - p - który został wykorzystany w tym przykładzie to jest przykładowy tekst, który wypełnia zawartość elementu - p - który został wykorzystany w tym przykładzie
domyślnie szerokość elementu HTML, który znajdzie się w zawartości elementu HTML, którego zawartość jest dzielona na kolumny, nie zajmuje całej szerokości elementu HTML, którego zawartość jest dzielona na kolumny

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      body {
        font-family:Helvetica, sans-serif;
        font-size:1.3em;
      }

      div {
        padding:15px;
        background-color:#DFF;
        column-count:3;
        -moz-column-count:3; /* zapis dla przeglądarki Firefox */
        -webkit-column-count:3; /* zapis dla przeglądarki Google Chrome, Safari, Opera 15+ */
      }

      p {
        background-color:#5DD;
      }
    </style>
  </head>

  <body>

    <div>
      <p>szerokość tego elementu - p - nie została rozciągnięta na całą szerokość wszystkich kolumn</p>
      to jest przykładowy tekst, który wypełnia zawartość elementu - p - który został wykorzystany w tym przykładzie
      to jest przykładowy tekst, który wypełnia zawartość elementu - p - który został wykorzystany w tym przykładzie
      to jest przykładowy tekst, który wypełnia zawartość elementu - p - który został wykorzystany w tym przykładzie
      to jest przykładowy tekst, który wypełnia zawartość elementu - p - który został wykorzystany w tym przykładzie
    </div>

  </body>
</html>