Question

它的代码如下：

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%;
    }

这是现在的实际结果：

我希望它在路上对齐，如果两个div的总高度比另一个高 - 它应该像一个在另一个下对齐，而第二个在底部。应该看起来像这样。

有没有办法通过CSS实现这一目标？或者我需要一些javascript吗？感谢。

Answer 1

我不知道你是否能够通过CSS实现它，但你一定要检查这个插件：https://github.com/muzuiget/user_agent_overrider

还有一篇关于纯CSS解决方案的好文章：Masonary。看看它是否适合你。

祝你好运！

Answer 2

使用display：inline-block和columns：2

＆＃13;

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;

}

＆＃13;

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

＆＃13;

如果一个人的身高比其他人高

2 个答案: