Zachowanie elementów blokowych
Mirosław Zelent
Do zbudowania szkieletu współczesnej witryny internetowej używamy tak zwanych znaczników strukturalnych. Klasycznym przykładem takiego znacznika jest <div> (od ang. divide = podział strony). Divy nazywane są też często elementami blokowymi, albo wprost – blokami. Element blokowy ma to do siebie, że zawsze układa się pod poprzedzającym go elementem. Na przykład: mamy w kodzie witryny dwa divy: czerwony i niebieski.
Nawet jeżeli ten pierwszy blok zajmuje jedynie 30% dostępnego na ekranie miejsca, to i tak następny, niebieski div, ułoży się domyślnie pod czerwonym. Pomimo, że zmieściłby się obok, to i tak ułoży się pod poprzednim – tak właśnie domyślnie zachowują się elementy blokowe:
<div class="czerwony"></div><div class="niebieski"></div>
Oczywiście możemy wpłynąć na te bloki odpowiednimi zapisami w CSS, tak aby mogły układać się także obok siebie (pełniej zapełniając przestrzeń okna przeglądarki) i właśnie tego dziś się nauczymy. Nie można przecież skutecznie budować interfejsów witryn, wiedząc jedynie, jak układać bloki jeden pod drugim.
Istnieją dwie uznane metody układania bloków obok siebie – jedna wymaga użycia w stylach tzw. opływania float:left połączonego z jego wyczyszczeniem clear:both, zaś w drugiej używamy zapisu display: inline-block.
Polecamy: Mega Sekurak Hacking Party
Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - wpiszcie go w koszyku, dzięki czemu otrzymacie 40% zniżki na bilet standard. Więcej szczegółów znajdziecie tutaj.
Książka: Wprowadzenie do bezpieczeństwa IT
Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!
Pomóż dzieciom
Polska Akcja Humanitarna od wielu lat dożywia dzieci. Prosimy, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękujemy!
Komentarze
Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać: kontakt@pasja-informatyki.pl. Dziękujemy za poświęcony czas - to dzięki Wam serwis staje się coraz lepszy!