How to make blocks of the same height

The easiest way to make blocks with the same height is using jQuery, for example, let's take the following block layout:

<div class="list">
	<div class="list-item">Block #1</div>
	<div class="list-item">Block #2</div>
	<div class="list-item">Block #3</div>
	<div class="list-item">Block #4</div>
	<div class="list-item">Block #5</div>
	<div class="list-item">Block #6</div>
</div>
HTML

Elements are fixed width and float to the right (float: left):

.list {
	margin: 0 -20px 0 0;
	overflow: hidden;
}
.list-item {
	width: 296px;
	float: left;
	margin: 0 20px 20px 0;
	border: 3px solid orange;
	padding: 15px 20px;
}
CSS

Due to the different block heights, the following result is obtained:

This problem can be fixed by setting the height of all elements in the following ways:

27.05.2021
64

Comments

to add a comment.

Other publications

Location - URL of the current page
The Location object is associated with the address bar of the browser, and its properties contain all read and write...
62
0
Auto height textarea
Auto-resizing textarea can be done in the following way...
174
0
Item appearing in turn
Examples of how to make elements progressively appear using standard jQuery animation functions.
82
0
Refresh the page with JS / HTML / PHP
Collection of methods for reloading a page or browser tab.
305
0
Close browser tab using JavaScript
To close the current tab or browser window in JS, just call the method...
2118
0