Na rysunku przedstawiono strukturę bloków strony internetowej: blok pierwszy po lewej, obok niego jeden pod drugim bloki drugi i trzeci, a pod spodem na całą szerokość blok czwarty. 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)

Question

Zadanie 24 z arkusza EE.09, czerwiec 2020

CSS Poziom: średnie

Na rysunku przedstawiono strukturę bloków strony internetowej: blok pierwszy po lewej, obok niego jeden pod drugim bloki drugi i trzeci, a pod spodem na całą szerokość blok czwarty. 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)

Ilustracja do zadania 24 z arkusza EE.09, czerwiec 2020

Wybierz odpowiedź 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;}

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%;}

Cały arkusz EE.09, czerwiec 2020

Pokaż odpowiedź i wyjaśnienie

Poprawna odpowiedź: B

#pierwszy {float:left; width:30%;} #drugi {float:left; width:70%;} #trzeci {float:left; width:70%;} #czwarty {clear:both;}

Dlaczego

Bloki 1, 2 i 3 pływają w lewo: drugi staje obok pierwszego, a trzeci nie mieści się w linii, więc spada pod drugi, wciąż obok wyższego pierwszego. clear: both na bloku czwartym sprowadza go pod wszystkie pływające bloki.