Równej wysokości kolumny

kursy tutoriale

Kategoria wpisu Flexbox, Kurs CSS, Kursy Tagi: , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Dość częstym problemem przy budowaniu strony internetowej jest utworzenie kolumn o równej wysokości. Wyrównanie dwóch kolumn z pewnością nikomu nie sprawia większego problemu, ale w momencie kiedy ilość kolumn zostanie zwiększona np. do trzech wtedy sprawa się komplikować.

Istnieje kilka metod na wyrównanie wysokości trzech lub większej ilości kolumn względem siebie nawzajem. Poniżej przedstawię dwie rożne metody, które zdarzyło mi się wykorzystać w pracy.

CSS3 Flexbox

Jest to jedna z popularniejszych metod z wykorzystaniem funkcji dostępnych w CSS3. Sam skrypt jest stosunkowo prosty i prezentuje się następująco:

Przykładowa zawartość 3 kolumn:

Kod CSS

Powyższy kod powinien być interpretowany przez większość przeglądarek internetowych.

Dzięki właściwości (display: flex;) możemy obok siebie ustawiać wiele różnych elementów. Ważne jest jednak by posiadały one odpowiednią szerokość dostosowaną do naszej strony.

Warto pamiętać, że przypadku stron RWD na zwężonym ekranie flex może powodować problemy. Trzeba więc tę wartość zmienić.

 

Metoda z marginesami

Inną metodą utworzenia równych kolumn jest zastosowanie marginesów. Zaczynamy podobnie jak w poprzednim przykładzie:

Zmiana następuje dopiero w CSS. Użyjemy zmienną „display: inline;” oraz odpowiednio ustawione marginesy

Dzięki poniższemu ustawieniu wszystkie elementy wychodzące poza element będą niewidoczne.

Teraz wystarczy tylko:

Te 2 elementy są w powyższym kodzie najistotniejsze. Tak naprawdę pozostałe elementy możemy dowolnie ustawiać.

 

Jak widzicie istnieje kilka metod na uzyskanie równych kolumn. Powyższe kody mogą inaczej działać na różnych przeglądarkach.

See the Pen Equal to the height of the column CSS by Aura (@Julka85) on CodePen.0

 

Źródło:

http://www.positioniseverything.net/articles/onetruelayout/equalheight

dodatkowe tagi:
wysokość DIV’a względem DIV’a sąsiedniego
trzy div tej samej wysokości, długowi, identyczne
równe, identyczne trzy kolumny

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *