Przejdź do treści głównej
INF.03Pytanie #594 z 1558css-box-model-i-pozycjonowanie

Na rysunku przedstawiono strukturę bloków strony internetowej. Który z fragmentów formatowania strony pasuje do takiego układu? (Dla uproszczenia pominięto właściwości koloru tła, wysokości i czcionki)

Opcje odpowiedzi:
A
#pierwszy {float:left; width:30%; } #drugi {clear:both; width:70%; } #trzeci {float:left; width:70%; } #czwarty {clear:both; }
B
#pierwszy {float:left; width:30%;} #drugi {float:left; width:70%;} #trzeci {float:left; width:70%;} #czwarty {clear:both; }
Prawidłowa
C
#pierwszy { width: 30%; } #drugi { width: 70%; } #trzeci { width: 70%; } #czwarty { width: 100%; }
D
#pierwszy{float:left; width:30%;} #drugi {clear:both; width:70%;} #trzeci {clear:both; width:70%;} #czwarty {float:left; width:100%;}
Reklama

Wyjaśnienie i uzasadnienie dydaktyczne

Poprawna odpowiedź: B (#pierwszy {float:left; width:30%;}\n#drugi {float:left; width:70%;}\n#trzeci {float:left; width:70%;}\n#czwarty {clear:both; })

Aby uzyskać dwukolumnowy układ bloków:

  1. Blok #pierwszy ma właściwość float: left; width: 30%;,
  2. Blok #drugi opływa go po prawej stronie: float: left; width: 70%;,
  3. Blok #trzeci ma szerokość 70\%,
  4. Blok #czwarty czyści opływanie właściwością clear: both;, zajmując całą szerokość pod spodem.

Dlaczego pozostałe opcje są nieprawidłowe?

  • A: clear: both w bloku #drugi wymusiłoby przeniesienie go pod spód zamiast obok bloku pierwszego.
  • C: Brak właściwości float spowoduje ułożenie wszystkich bloków jeden pod drugim w pionie.
  • D: clear: both w bloku #trzeci i float w #czwarty zaburza układ kolumnowy.

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.

Rozwiąż w Quizie

Pojęcia z tego pytania

Cały słownik INF03
Reklama

Podobne pytania z działu „Css box model i pozycjonowanie”

Ten sam obszar materiału z kwalifikacji INF.03. W całej bazie znajdziesz 47 pytań z tego działu.