KWALIFIKACJA INF3 - CZERWIEC 2017

PYTANIE NR 10.
Aby przygotować szablon strony z trzema kolumnami ustawionymi obok siebie, można posłużyć się stylem CSS
Ilustracja przedstawia cztery różne fragmenty kodu CSS, które mogą być używane do ustawienia stylu kolumn na stronie
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Aby uzyskać trzy kolumny obok siebie, elementy mogą być "opływane" w lewo przez użycie float: left oraz mieć ustaloną szerokość (np. 33%). Dzięki temu każdy z trzech bloków zajmuje część szerokości kontenera i ustawia się w jednym wierszu, tworząc układ trójkolumnowy.

Pełne wyjaśnienie:

Układ trójkolumnowy oznacza, że trzy elementy blokowe mają znaleźć się w jednym wierszu, obok siebie. Klasycznym (historycznie bardzo popularnym) sposobem osiągnięcia tego w CSS jest użycie właściwości float oraz nadanie elementom odpowiedniej szerokości.

Odpowiedź ".kolumny { float: left; width: 33%; }" realizuje tę ideę wprost:

  • float: left wyjmuje element z normalnego przepływu w taki sposób, że kolejne elementy mogą ustawiać się obok niego (po prawej stronie), o ile jest na to miejsce.
  • width: 33% ustala, że każda kolumna zajmuje około jednej trzeciej szerokości kontenera, co przy trzech elementach pozwala im zmieścić się obok siebie.

Dlaczego pozostałe typowe odpowiedzi w takich zadaniach bywają błędne? Najczęściej dotyczą właściwości, które:

  • nie powodują ustawienia elementów w jednym wierszu (np. same marginesy, wyrównanie tekstu czy wysokość),
  • zmieniają wygląd, ale nie mechanizm układu (np. kolor tła, obramowanie),
  • nie gwarantują trzech kolumn obok siebie (np. brak określonej szerokości może spowodować zawijanie do kolejnej linii).

Warto pamiętać, że choć float jest rozwiązaniem działającym i spotykanym w starszych szablonach, we współczesnych projektach częściej stosuje się nowsze mechanizmy układu (np. siatkę lub układy elastyczne), bo są bardziej przewidywalne i wygodne. Na egzaminie jednak nadal można spotkać pytania sprawdzające rozumienie klasycznych technik oraz umiejętność pracy z kodem legacy.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Układ trójkolumnowy to rozmieszczenie trzech bloków (np. menu, treść, panel) w jednym wierszu obok siebie. W CSS można go uzyskać różnymi technikami: historycznie przez float, a współcześnie częściej przez siatkę lub układ elastyczny.
float powoduje, że element "opływa" na lewo lub prawo, a kolejne elementy mogą ustawić się obok niego, jeśli jest miejsce. To klasyczny sposób robienia kolumn, ale wymaga zwykle ustawienia szerokości oraz często czyszczenia opływania (clear) w kontenerze.
Trzy kolumny muszą zmieścić się w szerokości kontenera. Ustawienie szerokości w procentach (około 33%) pozwala każdej kolumnie zająć zbliżoną część miejsca. W praktyce trzeba uwzględnić też marginesy i obramowania, bo mogą spowodować zawijanie.
Bez ustawionej szerokości elementy mogą mieć szerokość zależną od zawartości lub domyślną dla bloków, co często kończy się tym, że kolejne "kolumny" spadają do następnej linii. Dlatego w układach kolumnowych zwykle ustala się width (np. w %).
Najczęstsze problemy to: zapadanie się wysokości kontenera (bo elementy pływające nie zwiększają jego wysokości), potrzeba czyszczenia opływania (clear), oraz kłopoty z równymi wysokościami kolumn. To powód, dla którego powstały nowsze techniki układu.
Stosuje się tzw. czyszczenie opływania, np. przez dodanie elementu z clear po kolumnach albo użycie techniki "clearfix" na kontenerze. Celem jest sprawienie, by kontener poprawnie obejmował wysokością pływające elementy.
W nowych projektach zazwyczaj tak. Siatka umożliwia jawne zdefiniowanie kolumn i odstępów, łatwiej robić wersje responsywne i unika się typowych problemów float. Na egzaminie jednak możesz spotkać float, bo sprawdza rozumienie starszych rozwiązań.
Responsywność uzyskuje się przez elastyczne jednostki (np. procenty) i reguły warunkowe (media queries). W praktyce często ustawia się trzy kolumny na szerokich ekranach, a na wąskich przechodzi do jednej kolumny w pionie, by zachować czytelność.
Częste pomyłki to mylenie właściwości wpływających na wygląd (np. marginesy) z właściwościami układu, ignorowanie konieczności ustawienia szerokości oraz nieuwzględnianie, że suma szerokości i odstępów może przekroczyć 100%, co psuje układ.
Szukaj właściwości, które zmieniają sposób układania elementów w poziomie: klasycznie float z szerokością, albo mechanizmy układu (siatka/układ elastyczny). Same właściwości typu kolor, czcionka czy obramowanie nie tworzą kolumn.
info

Statystycznie 55% uczniów zna prawidłową odpowiedź. średnie

Eksperci podkreślają: "Aby uzyskać trzy kolumny obok siebie, elementy mogą być "opływane" w lewo przez użycie float: left oraz mieć ustaloną szerokość (np. 33%)."

Źródła:

  • MDN Web Docs: "float" (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/float (dostęp: 2026-03-01)
  • W3C: "CSS 2.1 Specification" — rozdział 9.5 Floats — https://www.w3.org/TR/CSS21/visuren.html#floats (dostęp: 2026-03-01)
  • MDN Web Docs: "CSS Grid Layout" — https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout (dostęp: 2026-03-01)

Materiały:

  • Dokumentacja MDN: właściwość CSS float
  • Dokumentacja MDN: CSS Grid Layout
  • Dokumentacja MDN: CSS Flexible Box Layout

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego