Ostatnio edytowany:

column-span

Autor: Virtual Patriot

Opis właściwości column-span

Za pomocą właściwości column-span możemy określić na ile kolumn, na które została podzielona treść elementu HTML, powinien zwiększyć swój zasięg interesujący nas element HTML należący do wspomnianej treści.

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

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

Interpretacja właściwości column-span

Firefox

nie

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

none

Opis

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

Domyślnie element HTML należący do treści, która została podzielona na kilka kolumn nie zwiększa swojego zasięgu na żadną dodatkową kolumnę.

Przykład

ten tekst wyświetlony w oknie przeglądarki internetowej

przykładowy element "p"

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

Przykładowy element "p" należący do treści, która została podzielona na kilka kolumn nie zwiększył swojego zasięgu na więcej kolumn.

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

      p {
        margin:0;
        text-align:center;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej <p>przykładowy element "p"</p> 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>

all

Opis

Za pomocą wartości all właściwości column-span możemy sprawić, że interesujący nas element HTML należący do treści, która została podzielona na kilka kolumn zwiększy swój zasięg na wszystkie kolumny.

Treść występująca przed elementem HTML posiadającym właściwość "column-span" wraz z wartością "all" zostanie równomiernie rozdzielona (jeżeli jest to możliwe) pomiędzy tymi kolumnami, na które zwiększył swój zasięg wspomniany element HTML.

Przykład

ten tekst wyświetlony w oknie przeglądarki internetowej

przykładowy element "p"

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

Przykładowy element "p" należący do treści, która została podzielona na kilka kolumn zwiększył swój zasięg na wszystkie kolumny, ponieważ do wspomnianego elementu "p" została dodana właściwość "column-span" wraz z wartością "all".

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

      p {
        column-span:all;
        -moz-column-span:all;
        margin:0;
        text-align:center;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej <p>przykładowy element "p"</p> 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>