Coś zamiast float

Załóżmy, że chcemy zrobić kilka list w kilku kolumnach. Pierwsza rzecz jaka przychodzi do głowy, to nadanie im parametru float i po sprawie. Jednak można to też zrobić nie używając float. Przykład:

  • Element 1 listy numer 1
  • Element 2 listy numer 1
  • Element 3 listy numer 1
  • Element 1 listy numer 2
  • Element 2 listy numer 2
  • Element 3 listy numer 2

W powyższym przypadku nie użyłam float:)
Styl jaki nałożony został na pierwszą kolumnę, to:

margin: 0px;
padding: 0px;
list-style-type: none;

Natomiast na drugą:

margin: -77px 0px 0px 170px;
padding: 0px;
list-style-type: none;

Jak widać nie użyłam float. Zamiast float pojawia się w przypadku drugiej kolumny odpowiednio skonstruowana wartość margin. Mianowicie ujemna wartość (-62 piksele) powoduje że element objęty tym stylem zostanie podniesiony do góry – dzięki czemu wyrówna się z kolumną lewą. Natomiast ostatnia wartość (170 pikseli) to odsunięcie od lewej strony – odpowiednie by kolumny na siebie nie nachodziły.
Oczywiście można te dwie kolumny utworzyć używając właściwości “float” ustawianej na left bądź right w zależności od potrzeb.

You might also like