Stick items if one has more height than others

Question

Code for it looks like that:

HTML:

<div class="produit__rate">
            <div class="rating__header">
                <div class="rating__vote">
                    <span class="icon__stars icon__stars--three">
                   </span>
                    <p class="rating__numb">3<span class="small">/5</span></p>
                </div>
                <p class="rating__author">Avis laissé par Catherine B.</p>
            </div>
            <p class="rating__message">
                Excellent produit, résultats très satisfaisants.......... à voir sur le temps
            </p>
        </div>


        <div class="produit__rate">
            <div class="rating__header">
                <div class="rating__vote">
                    <span class="icon__stars icon__stars--three"></span>
                    <p class="rating__numb">3<span class="small">/5</span></p>
                </div>
                <p class="rating__author">Avis laissé par Delphine B.</p>
            </div>
            <p class="rating__message">
                ça fait 15 jours que je l'utilise, la crème est très simple d'application, une bonne texture qui ne laisse pas de traces par contre je dois continuer de mettre de la poudre par dessus sinon ça fait tendance orange sur moi (j'en mets juste sur les joues et le nez). Je trouve que ce n'est pas assez couvrant utilisé seul pourtant je ne suis pas comme sur certaines photos où on voit des photos avant et après. J'ai un doute aussi sur le côté bien hydratant à long terme (certains jours ma peau tiraille)... Je vais quand même continuer pour voir si j'ai une amélioration sur le long terme, si pas d'amélioration je laisse tomber cette crème pour revenir à ma BB crème bioderma qui est beaucoup moins chère.nJe précise que tout le monde peut l'essayer sans crainte, aucun risque d'allergie ou autre...nSinon merci pour le cadeau la cure de compléments alimentaires urgo, c'est pareil je teste...
            </p>
        </div>


        <div class="produit__rate">
            <div class="rating__header">
                <div class="rating__vote">
                    <span class="icon__stars icon__stars--three"></span>
                    <p class="rating__numb">3<span class="small">/5</span></p>
                </div>
                <p class="rating__author">Avis laissé par Sophie D.</p>
            </div>
            <p class="rating__message">
                Je l'utilise uniquement sur le cou et le décolleté. Effet instantané effectivement du au pouvoir couvrant du produit. J'espère que ce produit va corriger définitivement mes rougeurs (mais j'en doute). 
            </p>
        </div>
                </div>

CSS:

&__ratings {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        width: 76%;
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    &__rate {
        height: 100%;
        margin-right: 2.5%;
        margin-bottom: 30px;
        border-radius: 5px;
        background-color: $light-pink;
        -ms-flex-preferred-size: 47.5%;
        -webkit-flex-basis: 47.5%;
        flex-basis: 47.5%;
    }

This is the actual result right now:

I want it to be aligned in the way, that if two divs have smaller height in total than the other one - it should align it like one under other, and the second one in the bottom. It should be looking like this.

Is there a way to achieve that by the CSS only? Or do i need some javascript for that? Thanks.

@nbo IE11 is the last supported there - flexbox could be used then ;) — Kuba Wojtach, May 19 '17 at 09:10
Can you post a full actual html and css to generate UI described in picture above ? — hoangfin, May 19 '17 at 09:18
@wax https://codepen.io/powaznypowazny/pen/EmdLjL - check it out over there :) — Kuba Wojtach, May 19 '17 at 09:31

score 0 · Answer 1 · answered May 19 '17 at 09:27

0

I don't know if you are able to achieve it by CSS only but you should definitely check this plugin: Masonary

And also there is a good article about pure CSS solution: Pure CSS Masonary. Check it out and see if it works for you mate.

Good luck!

answered May 19 '17 at 09:27

Eren Süleymanoğlu

1,204
3
18
26

Arseniy Kushnir · Answer 2 · 2017-05-19T10:07:08.660

Use display:inline-block and columns:2

body {
  width: 650px;
  columns:2;
}
.produit__rate {
  height: 100%;
  margin-right: 2.5%;
  margin-bottom: 30px;
  border-radius: 5px;
  display:inline-block;
  width:300px;
  background-color:pink;

}

<div class="produit__rate">
            <div class="rating__header">
                <div class="rating__vote">
                    <span class="icon__stars icon__stars--three">
                   </span>
                    <p class="rating__numb">3<span class="small">/5</span></p>
                </div>
                <p class="rating__author">Avis laissé par Catherine B.</p>
            </div>
            <p class="rating__message">
                Excellent produit, résultats très satisfaisants.......... à voir sur le temps
            </p>
        </div>


        <div class="produit__rate">
            <div class="rating__header">
                <div class="rating__vote">
                    <span class="icon__stars icon__stars--three"></span>
                    <p class="rating__numb">3<span class="small">/5</span></p>
                </div>
                <p class="rating__author">Avis laissé par Delphine B.</p>
            </div>
            <p class="rating__message">
                ça fait 15 jours que je l'utilise, la crème est très simple d'application, une bonne texture qui ne laisse pas de traces par contre je dois continuer de mettre de la poudre par dessus sinon ça fait tendance orange sur moi (j'en mets juste sur les joues et le nez). Je trouve que ce n'est pas assez couvrant utilisé seul pourtant je ne suis pas comme sur certaines photos où on voit des photos avant et après. J'ai un doute aussi sur le côté bien hydratant à long terme (certains jours ma peau tiraille)... Je vais quand même continuer pour voir si j'ai une amélioration sur le long terme, si pas d'amélioration je laisse tomber cette crème pour revenir à ma BB crème bioderma qui est beaucoup moins chère.nJe précise que tout le monde peut l'essayer sans crainte, aucun risque d'allergie ou autre...nSinon merci pour le cadeau la cure de compléments alimentaires urgo, c'est pareil je teste...
            </p>
        </div>


        <div class="produit__rate">
            <div class="rating__header">
                <div class="rating__vote">
                    <span class="icon__stars icon__stars--three"></span>
                    <p class="rating__numb">3<span class="small">/5</span></p>
                </div>
                <p class="rating__author">Avis laissé par Sophie D.</p>
            </div>
            <p class="rating__message">
                Je l'utilise uniquement sur le cou et le décolleté. Effet instantané effectivement du au pouvoir couvrant du produit. J'espère que ce produit va corriger définitivement mes rougeurs (mais j'en doute). 
            </p>
        </div>
                </div>

Stick items if one has more height than others

2 Answers2