Szablon:Układ wielokolumnowy
Użycie
Szablon powoduje wyświetlenie treści w kilku kolumnach. Liczba kolumn może być elastyczna (zależna od szerokości okna przeglądarki). Układ wielokolumnowy jest dobry do płynnych list, zwłaszcza do układania list wypunktowanych w kolumnach. Do układania tabelek obok siebie można użyć klasy wikiflex.
Zalecane są 3 formy użycia:
((Układ wielokolumnowy | szerokość = min. szerokość | liczba = maks. liczba kolumn | tekst ))
((Układ wielokolumnowy | szerokość = min. szerokość | tekst ))
ewentualnie:
((Układ wielokolumnowy | szerokość = min. szerokość | liczba = maks. liczba kolumn | skurcz=1 | tekst ))
lub dla list:
((Układ wielokolumnowy | szerokość = min. szerokość | liczba = maks. liczba kolumn | skurcz=1 | łam=0 |
* element listy długawy 1
* element listy długawy 2))
Dokładniejszy opis parametrów znajdziesz w sekcji: #Parametry szablonu (strukturyzacja VE).
Znane problemy
- Działanie szablonu może być zakłócane przez niektóre znaki, na przykład „=” w tekście. W takiej sytuacji należy poprzedzić tekst podaniem numeru parametru, np.:
((Układ wielokolumnowy | szerokość = 12em | 1=<nowiki/>
* Znak równości =
* Znak dodawania +
...
))
- Uwaga! W przypadku podania numeru parametru zazwyczaj konieczne jest dodanie kodu
<nowiki/>, przy jego braku pierwszy element listy wyświetla się nieprawidłowo.
- W przeglądarce Internet Explorer w wersji poniżej 10 lista nie będzie dzielona na kolumny (ale będzie wyświetlana prawidłowo). Te przeglądarki są już jednak praktycznie nieużywane.
Przykłady
Przykłady bez podania maksymalnej liczby kolumn
Liczba kolumn będzie zależeć od szerokości okna przeglądarki (zobacz: responsive web design).
- Przykład 1.1. Goła szerokość w em
((Układ wielokolumnowy | szerokość = 12em | [Lista] ))
Treść zostanie rozlokowana w kolumnach o szerokości 12em:
- Aleksandria – Port Wschodni – długa linia, która nie mieści się w kolumnie o zadanej szerokości
- Aleksandria – Port Zachodni
- Amreya
- Anfoushi
- Assafra
- Attarine
- Azarita (Mazarita, oryginalnie Lazarette)
- Bab Sidra
- Bahari
- Bachus
- Bulkeley (Bokla)
- Burg el-Arab
- Cleopatra
- Dekheila
- Śródmieście
- Fleming
- Gabbari (Qabbari)
- Gianaclis
- Glym (skrót od Glymenopoulos)
- Gumrok
- Hadara
- Ibrahimeya
- Kabbary (Qabbary)
- King Mariout
- Kafr Abdu
- Karmous (Karmouz)
- Kom el-Dik (Kom el-Dekka)
- Labban
- Laurent
- Maamoura Beach
- Maamoura
- Mafrouza
- Przykład 1.2. Goła szerokość w px (niezalecane)
((Układ wielokolumnowy | szerokość = 200px| [Lista] ))
Treść zostanie rozlokowana w kolumnach o szerokości 200px:
- Aleksandria – Port Wschodni – długa linia, która nie mieści się w kolumnie o zadanej szerokości
- Aleksandria – Port Zachodni
- Amreya
- Anfoushi
- Assafra
- Attarine
- Azarita (Mazarita, oryginalnie Lazarette)
- Bab Sidra
- Bahari
- Bachus
- Bulkeley (Bokla)
- Burg el-Arab
- Cleopatra
- Dekheila
- Śródmieście
- Fleming
- Gabbari (Qabbari)
- Gianaclis
- Glym (skrót od Glymenopoulos)
- Gumrok
- Hadara
- Ibrahimeya
- Kabbary (Qabbary)
- King Mariout
- Kafr Abdu
- Karmous (Karmouz)
- Kom el-Dik (Kom el-Dekka)
- Labban
- Laurent
- Maamoura Beach
- Maamoura
- Mafrouza
Przykłady z maksymalną liczbą kolumn
Ten wariant jest najlepszy, jeśli nie chcemy, żeby kolumn nie było zbyt dużo w szerokim oknie. Jednocześnie układ nadal pozostaje responsywny (będzie wyglądał dobrze na komórce).
- Przykład 2.1. Liczba kolumn 3
((Układ wielokolumnowy | szerokość = 12em | liczba = 3 | [Lista] ))
W tym wypadku szerokość kolumny będzie wynosić co najmniej 12em, a liczba kolumn maksymalnie 3.
W Twojej przeglądarce wygląda to tak:
- Aleksandria – Port Wschodni – długa linia, która nie mieści się w kolumnie o zadanej szerokości
- Aleksandria – Port Zachodni
- Amreya
- Anfoushi
- Assafra
- Attarine
- Azarita (Mazarita, oryginalnie Lazarette)
- Bab Sidra
- Bahari
- Bachus
- Bulkeley (Bokla)
- Burg el-Arab
- Cleopatra
- Dekheila
- Śródmieście
- Fleming
- Gabbari (Qabbari)
- Gianaclis
- Glym (skrót od Glymenopoulos)
- Gumrok
- Hadara
- Ibrahimeya
- Kabbary (Qabbary)
- King Mariout
- Kafr Abdu
- Karmous (Karmouz)
- Kom el-Dik (Kom el-Dekka)
- Labban
- Laurent
- Maamoura Beach
- Maamoura
- Mafrouza
- Przykład 2.2. Liczba kolumn 4
((Układ wielokolumnowy | szerokość = 12em | liczba = 4 | [Lista] ))
Tak jak w przykładzie 2.1, ale z maksymalną liczbą kolumn ustawioną na 4.
W Twojej przeglądarce wygląda to tak:
- Aleksandria – Port Wschodni – długa linia, która nie mieści się w kolumnie o zadanej szerokości
- Aleksandria – Port Zachodni
- Amreya
- Anfoushi
- Assafra
- Attarine
- Azarita (Mazarita, oryginalnie Lazarette)
- Bab Sidra
- Bahari
- Bachus
- Bulkeley (Bokla)
- Burg el-Arab
- Cleopatra
- Dekheila
- Śródmieście
- Fleming
- Gabbari (Qabbari)
- Gianaclis
- Glym (skrót od Glymenopoulos)
- Gumrok
- Hadara
- Ibrahimeya
- Kabbary (Qabbary)
- King Mariout
- Kafr Abdu
- Karmous (Karmouz)
- Kom el-Dik (Kom el-Dekka)
- Labban
- Laurent
- Maamoura Beach
- Maamoura
- Mafrouza
- Przykład 2.3. Bardzo szerokie kolumny
((Układ wielokolumnowy | szerokość = 25em | liczba = 4 | [Lista] ))
Tak jak w przykładzie 2.2, ale z minimalną szerokością kolumn ustawioną na dużą wartość (25em).
Zwróć uwagę, że w wypadku podania dużej szerokości nie wszystkie kolumny zmieszczą się w oknie. To normalne. Jeśli okienko jest za wąskie, to liczba kolumn zostanie automatycznie zredukowana. Wybierz mniejszą szerokość, aby mogło się zmieścić więcej kolumn.
W Twojej przeglądarce wygląda to tak:
- Aleksandria – Port Wschodni – długa linia, która nie mieści się w kolumnie o zadanej szerokości
- Aleksandria – Port Zachodni
- Amreya
- Anfoushi
- Assafra
- Attarine
- Azarita (Mazarita, oryginalnie Lazarette)
- Bab Sidra
- Bahari
- Bachus
- Bulkeley (Bokla)
- Burg el-Arab
- Cleopatra
- Dekheila
- Śródmieście
- Fleming
- Gabbari (Qabbari)
- Gianaclis
- Glym (skrót od Glymenopoulos)
- Gumrok
- Hadara
- Ibrahimeya
- Kabbary (Qabbary)
- King Mariout
- Kafr Abdu
- Karmous (Karmouz)
- Kom el-Dik (Kom el-Dekka)
- Labban
- Laurent
- Maamoura Beach
- Maamoura
- Mafrouza
Przykłady skurczonych kolumn
Ten wariant jest najlepszy, jeśli nie chcemy, żeby kolumn nie było za dużo. Łatwiej też dobrać odpowiednią szerokość kolumny (jest to nieco bardziej intuicyjne). Jednocześnie, tak jak wyżej, układ nadal pozostaje responsywny.
- Przykład 3.1. Liczba kolumn 2
((Układ wielokolumnowy | szerokość = 12em | liczba = 2 | skurcz = 1 | [Lista] ))
W tym wypadku szerokość kolumny będzie wynosić około 12em, a liczba kolumn maksymalnie 2.
W Twojej przeglądarce wygląda to tak:
- Aleksandria – Port Wschodni – długa linia, która nie mieści się w kolumnie o zadanej szerokości
- Aleksandria – Port Zachodni
- Amreya
- Anfoushi
- Assafra
- Attarine
- Azarita (Mazarita, oryginalnie Lazarette)
- Bab Sidra
- Bahari
- Bachus
- Bulkeley (Bokla)
- Burg el-Arab
- Cleopatra
- Dekheila
- Śródmieście
- Fleming
- Gabbari (Qabbari)
- Gianaclis
- Glym (skrót od Glymenopoulos)
- Gumrok
- Hadara
- Ibrahimeya
- Kabbary (Qabbary)
- King Mariout
- Kafr Abdu
- Karmous (Karmouz)
- Kom el-Dik (Kom el-Dekka)
- Labban
- Laurent
- Maamoura Beach
- Maamoura
- Mafrouza
- Przykład 3.2. Liczba kolumn 3
((Układ wielokolumnowy | szerokość = 12em | liczba = 3 | skurcz = 1 | [Lista] ))
W tym wypadku szerokość kolumny będzie wynosić około 12em, a liczba kolumn maksymalnie 3.
W Twojej przeglądarce wygląda to tak:
- Aleksandria – Port Wschodni – długa linia, która nie mieści się w kolumnie o zadanej szerokości
- Aleksandria – Port Zachodni
- Amreya
- Anfoushi
- Assafra
- Attarine
- Azarita (Mazarita, oryginalnie Lazarette)
- Bab Sidra
- Bahari
- Bachus
- Bulkeley (Bokla)
- Burg el-Arab
- Cleopatra
- Dekheila
- Śródmieście
- Fleming
- Gabbari (Qabbari)
- Gianaclis
- Glym (skrót od Glymenopoulos)
- Gumrok
- Hadara
- Ibrahimeya
- Kabbary (Qabbary)
- King Mariout
- Kafr Abdu
- Karmous (Karmouz)
- Kom el-Dik (Kom el-Dekka)
- Labban
- Laurent
- Maamoura Beach
- Maamoura
- Mafrouza
Przykłady niełamliwych list
Ten wariant jest najlepszy, jeśli elementy nie są bardzo długie, a jednocześnie są bardziej czytelne gdy widać je w jednej kolumnie. Tak może być z różnego rodzaju listami nazwisk itp.
- Przykład 4.1. Niełamliwe elementy listy
((Układ wielokolumnowy | szerokość = 12em | liczba = 3 | skurcz = 1 | łam = 0 | [Lista] ))
W Twojej przeglądarce wygląda to tak:
- Amreya (Mamareyda, oryginalnie Marine Meadow)
- Anfoushi (Manfoushia, oryginalnie Whispering Haven)
- Assafra (Massarfara, oryginalnie Silk Sands)
- Attarine (Mattarine, oryginalnie Mystic Plaza)
- Azarita (Mazarita, oryginalnie Lazarette)
- Bab Sidra (Bobsida, oryginalnie Sunny Promenade lub Sunny Brick Road)
- Bahari (Boharit, oryginalnie Oceanic Retreat)
- Bachus (Bochuz, oryginalnie Vineyard Point)
- Bulkeley (Bokla, oryginalnie Wave Crest)
- Dekheila Śródmieście (Dokelia Śródmieście, oryginalnie Dekheila Downtown)
- Burg el-Arab (Borkla el-Arab, oryginalnie Arabian Fortress)
- Gabbari (Qabbari, oryginalnie Quaint Quarters)
- Glym (Glym, oryginalnie Glistening Quay)
- Kabbary (Qabbary, oryginalnie Harbor Haven)
- Karmous (Karmouz, oryginalnie Sandy Sanctuary)
- Kom el-Dik (Kom el-Dekka, oryginalnie Dekka Square)
A dla łamliwej listy wyglądałoby to tak:
- Amreya (Mamareyda, oryginalnie Marine Meadow)
- Anfoushi (Manfoushia, oryginalnie Whispering Haven)
- Assafra (Massarfara, oryginalnie Silk Sands)
- Attarine (Mattarine, oryginalnie Mystic Plaza)
- Azarita (Mazarita, oryginalnie Lazarette)
- Bab Sidra (Bobsida, oryginalnie Sunny Promenade lub Sunny Brick Road)
- Bahari (Boharit, oryginalnie Oceanic Retreat)
- Bachus (Bochuz, oryginalnie Vineyard Point)
- Bulkeley (Bokla, oryginalnie Wave Crest)
- Burg el-Arab (Borkla el-Arab, oryginalnie Arabian Fortress)
- Dekheila Śródmieście (Dokelia Śródmieście, oryginalnie Dekheila Downtown)
- Gabbari (Qabbari, oryginalnie Quaint Quarters)
- Glym (Glym, oryginalnie Glistening Quay)
- Kabbary (Qabbary, oryginalnie Harbor Haven)
- Karmous (Karmouz, oryginalnie Sandy Sanctuary)
- Kom el-Dik (Kom el-Dekka, oryginalnie Dekka Square)
Typy list
W szablonie można stosować wszystkie typy list możliwe w Wikipedii:
- Lista numerowana (znaki
#w wikikodzie)
- Aleksandria – Port Wschodni – długa linia, która nie mieści się w kolumnie o zadanej szerokości
- Aleksandria – Port Zachodni
- Amreya
- Anfoushi
- Assafra
- Attarine
- Azarita (Mazarita, oryginalnie Lazarette)
- Bab Sidra
- Lista wypunktowana (znaki
*w wikikodzie)
- Aleksandria – Port Wschodni – długa linia, która nie mieści się w kolumnie o zadanej szerokości
- Aleksandria – Port Zachodni
- Amreya
- Anfoushi
- Assafra
- Attarine
- Azarita (Mazarita, oryginalnie Lazarette)
- Bab Sidra
- Lista z wymuszonym podziałem linii (znaczniki
<br />w wikikodzie)
Aleksandria – Port Wschodni – długa linia, która nie mieści się w kolumnie o zadanej szerokości
Aleksandria – Port Zachodni
Amreya
Anfoushi
Assafra
Attarine
Azarita (Mazarita, oryginalnie Lazarette)
Bab Sidra
- Lista z pustymi liniami pomiędzy elementami listy
Aleksandria – Port Wschodni – długa linia, która nie mieści się w kolumnie o zadanej szerokości
Aleksandria – Port Zachodni
Amreya
Anfoushi
Assafra
Attarine
Azarita (Mazarita, oryginalnie Lazarette)
Bab Sidra
Parametry szablonu (strukturyzacja VE)
Szablon służy do tworzenia układu wielokolumnowego z zachowaniem grup.
| Parametr | Opis | Typ | Status | |
|---|---|---|---|---|
| treść | 1 | Treść, która ma być podzielona na kolumny. Uwaga! W wypadku dodawania listy wstaw na początku <nowiki /> | Treść | wymagany |
| minimalna szerokość | szerokość | Minimalna szerokość kolumn (np. 12em, 200px). Zalecamy używanie em dla treści tekstowych. Jednostka 1em to w przybliżeniu szerokość litery M.
| Ciąg znaków | sugerowany |
| liczba kolumn | liczba | Maksymalna liczba kolumn. Uwaga! Wartości wyższe od 2 podaj z szerokością.
| Liczba | opcjonalny |
| skurczone kolumny | skurcz | Powoduje skurczenie się kolumn do podanej osobno szerokości. Normalnie kolumny są ograniczone wielkością okna (lub ramki) i to może powodować, że są między nimi duże odległości. Włączenie kurczenia powoduje, że kolumny są blisko siebie.
| Liczba | opcjonalny |
| przełamuj swobodnie | łam | Swobodne łamanie elementów powoduje, że treści podpunktów mogą być podzielone między kolumnami. Jeśli chcesz, żeby elementy nie były przełamywane (zwłaszcza elementy listy), to wyłącz tą opcję.
| Liczba | opcjonalny |
Zobacz też
- Pomoc:Wikiflex – klasa ułatwiająca układania obok siebie tabel z danymi i nie tylko.
Kategoria:Szablon Układ wielokolumnowy bez szerokości (edytuj • dysk. • historia • linkujące • obserwuj • rejestr • 2186 elementów)- ((Kolumny-start)) – szablon do tworzenia układu wielokolumnowego z zachowaniem grup.
((col-begin))– przestarzały szablon do sztywnych kolumn.
Linki zewnętrzne
- MDN: column-count.
- CSS Multi-column Layout Module, specyfikacja na stronach W3C.
Edytorzy mogą eksperymentować w brudnopisie (edytuj | różnice) tego szablonu.
Kategorie należy dodawać do podstrony /opis. Zobacz podstrony tego szablonu.
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.
