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?
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?
<aside> i <main> jako display: inline-block; dla wszystkich szerokości, a następnie manipulowanie ich szerokością procentową.<aside> i <main> jako elementy blokowe (np. display: block; width: 100%;). Następnie w media query dla (min-width: 769px) zastosować np. Flexbox (display: flex; na kontenerze rodzica) lub Grid (display: grid;) do ułożenia ich obok siebie.float elementów w zależności od szerokości okna.position: fixed; dla <aside> i odpowiedniego marginesu dla <main> tylko na większych ekranach.Wyjaśnienie i uzasadnienie dydaktyczne
Poprawna odpowiedź: B (Domyślnie ustawić <aside> i <main> jako elementy blokowe (np. `display: b...)
Zgodnie z podejściem Mobile First, elementy domyślnie układają się pod sobą (jako elementy blokowe). Następnie, dla większych ekranów (np. min-width: 769px), można użyć Flexbox lub CSS Grid na ich wspólnym kontenerze, aby ułożyć je obok siebie w kolumnach. To zapewnia, że na małych ekranach układ jest prosty i czytelny, a na większych wykorzystywana jest dostępna przestrzeń.
Dlaczego pozostałe opcje są nieprawidłowe?
- A:
inline-blockmoże być trudniejszy w zarządzaniu odstępami i wyrównaniem w złożonych układach kolumnowych w porównaniu do Flexbox czy Grid. - C: Poleganie na JavaScript do podstawowego layoutu responsywnego jest często niezalecane, jeśli to samo można osiągnąć za pomocą CSS (zasada Progressive Enhancement).
- D:
position: fixed;wyjmuje element z przepływu i może być trudne do zarządzania w kontekście płynnego, responsywnego układu treści.
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
- Pozycjonowanie elementów i z-indexWłaściwości CSS kontrolujące położenie elementu w dokumencie (static, relative, absolute, fixed, sticky) oraz kolejność nakładania warstw (z-index).
- CSS Grid LayoutDwuwymiarowy system układu w CSS umożliwiający tworzenie złożonych siatek opartych na jednoczesnym podziale na wiersze i kolumny.
- Media Queries i Responsive Web Design (RWD)Technika CSS pozwalająca na dopasowanie wyglądu i układu strony do różnych rozdzielczości ekranów (smartfony, tablety, laptopy).
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.
- #1197
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)?
- #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ść: