Równej wysokości kolumny / elementy obok siebie na stronie internetowej

Reading Time: 3 minutes

Dość częstym problemem przy budowaniu strony internetowej jest utworzenie kolumn (zbudowanych np. DIV) o równej (takiej samej) wysokości.

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

Po co nam równe kolumny?

Nie oszukujmy się chodzi głownie o estetykę. Kolumny o różnej wysokości mogą wyglądać dziwnie – tak jak by zostały urwane. Poza tym czasem mogą zacząć się na siebie nasuwać lub będą znajdowały się w nie koniecznie odpowiednich miejscach.

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 zaczyna się już komplikować. Szczególnie, że musimy pamiętać o RWD – czyli o różnych rozmiarach urządzeń naszych odbiorców.

równej wysokości kolumny

Nasz problem z wyrównaniem większej ilości kolumn można rozwiązać z CSS na różne sposoby. Poniżej znajdziecie kilka przykładowych rozwiązań dla 3 lub większej ilości.

Wyrównanie wysokości z CSS3 Flexbox

Aktualnie jest to jedna z popularniejszych metod z wykorzystaniem funkcji dostępnych w CSS3. Głównym powodem jest łatwość zastosowania oraz coraz to większa popularność Flexbox. W przypadku korzystania z  Bootstrap 4+ kod będzie trzeba trochę zmodyfikować w każdym innym przypadku wygląda on tak:

Przykładowa zawartość 3 kolumn:

<div class="flex-container">
  <div class="flex-item item1">Lorem ipsum dolor sit amet, consectetur adipiscing</div>
  <div class="flex-item item2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin.</div>
  <div class="flex-item item3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>  
</div>

Kod CSS:

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    background-color: gray;
}

.flex-item {
    background-color: teal;
}

.item1 {
    width:35%;
}

.item2 {
    width:35%;
	background-color: gray;
}

.item3 {
    width:35%;
}

Powyższy kod powinien być interpretowany przez większość przeglądarek internetowych. Co jest dla nas dobrą wiadomością. Strona nie powinna się rozjechać.

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ć dla mniejszych urządzeń w zależności od potrzeb pomoże nam -> @media query.

Wyrównanie wysokości z marginesami

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

<div id="wrapper">
<div id="block_1">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>
<div id="block_2">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, 
</div>
<div id="block_3">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque
</div>
</div>

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

#block_1
	{
	float: left;
	width: 34%;
	margin-left: 33%;
	background:#eee;
	}
* html #block_1
	{
	display: inline;
	}
#block_2
	{
	float: left;
	width: 33%;
	margin-left: -67%;
	background:#ccc;
	}
#block_3
	{
	float: left;
	width: 33%;
	background:#eee;
	}

#block_1, #block_2, #block_3
	{
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 
	}

#wrapper
	{
	overflow: hidden; 
	}

#wrapper
	{
	float: left;
	float/**/: none;
	}
/* easy clearing */
#wrapper:after
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
#wrapper
	{
	display: inline-block;
	background:#3e3e3e;
	}

#wrapper
	{
	display: block;
	}

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

#wrapper
	{
	overflow: hidden; 
	}

Teraz wystarczy tylko:

#block_1, #block_2, #block_3
	{
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 
	}

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.dark

Źródło:

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

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *