Na stronie   W katalogu
     
Rozumiem I Akceptuje (X)
Ta strona używa plików cookies aby lepiej spełnić Państwa oczekiwania. Jednocześnie informuje, że można zablokować zapisywanie cookies, zmieniając ustawienia przeglądarki.


    Dodaj strone do katalogu     Dodaj reklame     Pobierz program     Dodaj do ulubionych     Kontakt   


CSS3 - podział tekstu na kolumny


Za pomocą html5 i CSS3 możemy w prosty sposób podzielić tekst na kolumny. Przydaje się to zwłaszcza w redagowaniu artykułów. Uwaga jeśli twoja przeglądarkach nie obsługuje tego to nie zobaczysz efektu.

Tak wygląda efekt.

tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

Tak wygląda kod.

<div style="border:solid 1mm; border-color: Black; height: 70mm; width: 100mm; -moz-column-count: 3; -moz-column-gap: 30px;
-webkit-column-count: 3; -webkit-column-gap: 30px;
column-count: 3; column-gap: 30px;
">
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
</div>

Aby we wszystkich nowych przeglądarkach efekt był widoczny trzeba użyć kod w trzech wariantach:

  • -moz-column-count: 3; -moz-column-gap: 30px;
  • -webkit-column-count: 3; -webkit-column-gap: 30px;
  • column-count: 3; column-gap: 30px;

Pierwsza część kodu: (-moz-column-count: 3; -webkit-column-count: 3; column-count: 3;) mówi nam na ile kolumn tekst ma być podzielony. W moim przykładzie tekst ma być podzielony na trzy kolumny. Druga część kodu (-moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px;) określa dodatkową odległość między kolumnami. W moim przykładzie jest to 30px.