Ostatnio edytowany:

column-width

Autor: Virtual Patriot

Opis właściwości column-width

Za pomocą właściwości column-width możemy określić sugerowany rozmiar każdej kolejnej pojedynczej kolumny, na które powinna zostać podzielona treść interesującego nas elementu HTML.

Dla zaawansowanych

gdy element HTML posiada poziomy tryb zapisu treści, wtedy właściwość column-width określa sugerowany rozmiar szerokości kolumny

gdy element HTML posiada pionowy tryb zapisu treści, wtedy właściwość column-width określa sugerowany rozmiar wysokości kolumny

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

przeznaczenie
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • tak, lecz tylko wartość rozmiar

Interpretacja właściwości column-width

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

auto

Opis

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

Domyślnie (gdy wartością właściwości column-count elementu HTML jest również wartość auto) treść elementu HTML nie jest dzielona na kolumny.

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

Treść przykładowego elementu "div" nie została podzielona na kolumny.

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

rozmiar

Opis

Za pomocą właściwości column-width oraz dowolnej dodatniej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną możemy określić sugerowany rozmiar każdej kolejnej pojedynczej kolumny, na które powinna zostać podzielona treść interesującego nas elementu HTML.

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

Sugerowanym rozmiarem szerokości każdej kolejnej kolumny, na które została podzielona treść przykładowego elementu "div" jest rozmiar równy 200 pikseli, ponieważ do wspomnianego elementu "div" została dodana właściwość "column-width" wraz z wartością "200px".

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-width:200px;
        -moz-column-width:200px;
        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>