K
K
keche2017-06-12 15:00:58
css
keche, 2017-06-12 15:00:58

How to adjust blocks in height?

There are 4 blocks.
If you reduce the height of the first block, then the two blocks below, according to the standard in the layout, will line up after the height of the longest block in the line. (first part of the image)
How do I make the boxes on the second line immediately follow the box that has a smaller height? (second part of image)
a8ef4a1a579d4116b4312237b519c369.jpg

Answer the question

In order to leave comments, you need to log in

4 answer(s)
M
Misha, 2017-06-12
@hvdd

If the layout has only 2 columns , then like this:

<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>

.section:nth-child(2n + 1) {
    float: left;
    clear: left;
}

.section:nth-child(2n) {
    float: right;
    clear: right;
}

Screenshot
495ac0667002408ab2e5902f778fee09.JPG
Demo on codepen
If there are many columns, then using multicolumn :
.container {
  column-width: 250px; /* Ширина колонки */
  column-gap: 10px;  /* Расстояние между колонками */
}

.item {
  break-inside: avoid; /* Запрещает разрыв блока */
}

Screenshot
878c7317d722403bb2560542d97c6b46.JPG
Demo on codepen

L
Lobster, 2017-06-12
@YoManYo

Masonry https://www.youtube.com/watch?v=_yTzksbNCcQ

A
Alexander Pushkarev, 2017-06-12
@AXP-dev

1) Via float: left (but not always perfect)
2) https://masonry.desandro.com/

K
kn1ght_t, 2017-06-12
@kn1ght_t

wrap left and right blocks in parent?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question