Strona główna › Pytania INF.03 › Pytanie 271
INF.03 · pytanie #271
Na ilustracji przedstawiono strukturę bloków na stronie internetowej. Który z poniższych fragmentów CSS odpowiada takim ustawieniom? (Dla uproszczenia pominięto właściwości dotyczące koloru tła, wysokości oraz czcionki)
- A#pierwszy{float:left; width:30%;} #drugi {clear:both; width:70%;} #trzeci {clear:both; width:70%;} #czwarty {float:left; width:100%;}
- B#pierwszy {float:left; width:30%; } #drugi {clear:both; 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 {float:left; width:70%;} #trzeci {float:left; width:70%;} #czwarty {clear:both; }
Poprawna odpowiedź: D. #pierwszy {float:left; width:30%;} #drugi {float:left; width:70%;} #trzeci {float:left; width:70%;} #czwarty {clear:both; }
Kliknij odpowiedź, którą uważasz za poprawną.
Wyjaśnienie
Odpowiedź pierwsza jest prawidłowa, gdyż prawidłowo wykorzystuje właściwość float w stylach CSS, aby uzyskać pożądany układ bloków na stronie internetowej. Float pozwala elementom przemieszczać się na lewą lub prawą stronę kontenera, co jest kluczowe w tworzeniu layoutów. W tym przypadku #pierwszy, #drugi i #trzeci mają ustawione float:left, co umożliwia ich równoległe ustawienie w poziomie aż do momentu, gdy szerokości kontenera są zapełnione. Następnie blok #czwarty wymaga clear:both, aby przemieszczać się poniżej wszystkich poprzednich elementów z ustawionym float. To powszechna technika stosowana w projektowaniu responsywnych układów stron, gdzie równoległe pozycjonowanie elementów pozwala na efektywne wykorzystanie przestrzeni. Float w połączeniu z odpowiednimi szerokościami procentowymi pomaga tworzyć elastyczne projekty, które dobrze skalują się na różnych urządzeniach, co jest zgodne z nowoczesnymi standardami web developmentu. Ponadto zrozumienie działania float i clear jest fundamentem przy tworzeniu klasycznych layoutów typu grid przed wprowadzeniem nowoczesnych rozwiązań takich jak Flexbox czy CSS Grid, co pokazuje zrozumienie podstawowych zasad CSS.
🤖 Wyjaśnienie generowane przez AI – weryfikuj w oficjalnych źródłach.