Chcesz stworzyć układ dwukolumnowy, gdzie lewa kolumna (pasek boczny) ma stałą szerokość 200px, a prawa kolumna (główna treść) zajmuje pozostałą dostępną szerokość. Obie kolumny mają znajdować się obok siebie. Która z poniższych technik CSS jest popularnym i elastycznym sposobem na osiągnięcie tego efektu w nowoczesnym CSS, zakładając odpowiednią strukturę HTML (np. kontener i dwie wewnętrzne divy)?
Chcesz stworzyć układ dwukolumnowy, gdzie lewa kolumna (pasek boczny) ma stałą szerokość 200px, a prawa kolumna (główna treść) zajmuje pozostałą dostępną szerokość. Obie kolumny mają znajdować się obok siebie. Która z poniższych technik CSS jest popularnym i elastycznym sposobem na osiągnięcie tego efektu w nowoczesnym CSS, zakładając odpowiednią strukturę HTML (np. kontener i dwie wewnętrzne divy)?
float: left; dla lewej kolumny i float: right; dla prawej kolumny, z odpowiednim czyszczeniem floatów.display: flex;, lewa kolumna z flex-basis: 200px; (lub width: 200px;) i flex-shrink: 0;, a prawa kolumna z flex-grow: 1;.position: absolute; left: 0; width: 200px; i prawa kolumna z position: absolute; left: 200px; right: 0;.<table>, <tr>, <td>) do stworzenia struktury kolumn, a następnie stylizowanie jej za pomocą CSS.Wyjaśnienie i uzasadnienie dydaktyczne
Poprawna odpowiedź: B (Zastosowanie modelu Flexbox: kontener nadrzędny z display: flex;, lewa kolu...)
Flexbox jest nowoczesnym modelem układu w CSS, idealnie nadającym się do tworzenia elastycznych kontenerów i rozmieszczania elementów w jednym wymiarze. Ustawienie display: flex; na kontenerze rodzica, a następnie odpowiednie właściwości flex (jak flex-basis, flex-shrink, flex-grow) na elementach dzieci, pozwala łatwo osiągnąć pożądany układ dwukolumnowy, gdzie jedna kolumna ma stałą szerokość, a druga dynamicznie wypełnia resztę miejsca.
Dlaczego pozostałe opcje są nieprawidłowe?
- A:
floatbył często używany do tworzenia układów kolumnowych, ale wiąże się z problemami (np. konieczność czyszczenia floatów, trudności z pionowym wyrównaniem) i jest mniej elastyczny niż Flexbox czy Grid dla złożonych layoutów. - C: Pozycjonowanie absolutne wyjmuje elementy z normalnego przepływu dokumentu, co może komplikować zarządzanie układem, zwłaszcza jeśli wysokość kolumn jest dynamiczna lub treść ma na siebie wpływać.
- D: Używanie tabel HTML do celów layoutu jest przestarzałą praktyką i jest niezalecane ze względu na semantykę i dostępność; tabele służą do prezentacji danych tabelarycznych.
Chcesz poćwiczyć całą kwalifikację INF.03?
Egzamin próbny na czas, nauka działami, losowe pytanie albo przegląd całej bazy — wszystko w przeglądarce i bez zakładania konta.
Pojęcia z tego pytania
- CSS FlexboxJednowymiarowy model układu w CSS (Flexible Box Layout) służący do wyrównywania i dystrybucji przestrzeni między elementami w wierszu lub kolumnie.
- CSS Grid LayoutDwuwymiarowy system układu w CSS umożliwiający tworzenie złożonych siatek opartych na jednoczesnym podziale na wiersze i kolumny.
- Struktury danych: Stos (LIFO) i Kolejka (FIFO)Liniowe struktury danych różniące się regułą dostępu do elementów: Stos (ostatni wchodzi, pierwszy wychodzi) vs Kolejka (pierwszy wchodzi, pierwszy wychodzi).
Podobne pytania z działu „Css uklady flex i grid”
Ten sam obszar materiału z kwalifikacji INF.03. W całej bazie znajdziesz 4 pytań z tego działu.
- #1207
Chcesz, aby układ Twojej strony zmieniał się z jednokolumnowego na dwukolumnowy, gdy szerokość viewportu przekroczy 768px. Jaką technikę CSS można wykorzystać, aby elementy boczne (
<aside>) i główna treść (<main>) ułożyły się obok siebie na większych ekranach, a pod sobą na mniejszych? - #1209
Masz element
.dzieckozposition: absolute;umieszczony wewnątrz elementu.rodzic. Która z poniższych deklaracji CSS, zastosowana na.rodzic, nieoczekiwanie również uczyni go blokiem pozycjonującym (containing block) dla.dziecko, podobnie jakposition: relative;? - #1520
W kontenerze Flexbox z ustawionymi regułami
display: flex;orazflex-direction: row;, aby rozłożyć elementy równomiernie wzdłuż głównej osi w taki sposób, aby odstępy między nimi były równe, a odstępy na brzegach kontenera były o połowę mniejsze od odstępów między elementami, należy zastosować właściwość: