Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Aby stworzyć układ strony z trzema kolumnami obok siebie, można wykorzystać styl CSS
Odpowiedzi
Informacja zwrotna
Poprawna odpowiedź A wykorzystuje właściwość float CSS ustawioną na left oraz szerokość width na 33 procent co pozwala na umieszczenie trzech kolumn obok siebie na stronie internetowej Float jest często używany do tworzenia układów wielokolumnowych gdyż pozwala na pływające rozmieszczenie elementów blokowych wewnątrz kontenera Dzięki ustawieniu szerokości na 33 procent zapewniamy że trzy kolumny będą mogły się zmieścić obok siebie w jednym rzędzie w ramach dostępnej szerokości kontenera Jest to efektywne podejście w przypadku responsywnych projektów gdzie nie zawsze znamy dokładną szerokość dostępnej przestrzeni Floating jest klasycznym podejściem w CSS i chociaż nowe technologie jak flexbox czy grid oferują więcej możliwości jest wciąż powszechnie stosowany w wielu projektach szczególnie gdy chodzi o proste układy Dodatkowo float left jest zgodny z wielu przeglądarkami co zapewnia większą uniwersalność kodu Przy projektowaniu stron zawsze warto pamiętać o dodaniu clearfix lub overflow hidden do rodzica elementów pływających aby uniknąć problemów z zawijaniem się kontenera wokół elementów pływających
W rozwiązaniu B zastosowano właściwość clear both co powoduje że element z klasą kolumny nie pozwala na ustawienie innych elementów obok siebie w tym samym wierszu Elementy z właściwością clear both resetują float wokół siebie co oznacza że żadna kolumna nie może być pływająca obok innej W efekcie nie osiągniemy zamierzonego celu jakim jest trzykolumnowy układ w jednym wierszu Jest to błąd często popełniany przez osoby nieznające działania mechanizmu clear w CSS Rozwiązanie C natomiast korzysta z float right oraz height co ustawia elementy pływające z prawej strony kontenera oraz ustawia wysokość na 33 procent co może być mylące float right stosowany jest głównie gdy chcemy aby elementy pływały do prawej krawędzi co nie jest pomocne w sytuacji kiedy zamierzamy stworzyć równomierne kolumny Rozwiązanie D przy zastosowaniu float left oraz width 40 procent powoduje że trzy kolumny nie zmieszczą się obok siebie w jednym wierszu ponieważ przekroczą 100 procent szerokości dostępnej przestrzeni Jest to klasyczny błąd w wyliczeniach kiedy szerokość sumuje się do wartości wyższej niż 100 procent co prowadzi do niepożądanego łamania się wierszy i niepoprawnego układu strona internetowa Aby uniknąć takich błędów warto zawsze przeliczać sumaryczną szerokość wszystkich elementów pływających i upewnić się że nie przekracza ona dostępnej przestrzeni w kontenerze To podejście pozwala na tworzenie bardziej przewidywalnych i spójnych układów na stronie internetowej