Comment obtenir une grille d'éléments de liste de hauteur égale?

Je suis en train de faire une grille de produits en utilisant les éléments de la liste et inline-block. Le problème est: le contenu des blocs de variables ont des hauteurs et de la inline-block permet de ne pas garder les hauteurs égales.

Le code:

#blocks ul{
  list-style-type:none;
  margin:0px;
  padding:0px;
}

#blocks li {
  display:inline-block;
  vertical-align:top;
  width:280px;
  background-color:#ff9933;
  padding:13px;
  margin: 0px 0px 20px 19px;
}

<div id="blocks">
    <ul>
       <li>...</li>
       <li>...</li>
       <li>...</li>
    </ul>
</div>

Voici une image pour illustrer le problème.

J'ai besoin de l'blocs de garder la même hauteur des blocs plus importants, indépendamment de son contenu. Est-il possible de faire quelque chose comme cette?

Et enfin: Désolé, l'anglais n'est pas ma langue maternelle 🙂

source d'informationauteur helltallica

  1. 11

    1. Ajoutant ce qui suit à la li CSS imiter l'exemple d'image que vous avez fournis. 

        height: 150px;
    min-height: 150px;
    overflow:auto;

    2. Aussi, voici quelques autres approches:

  2. 7

    Il y a un W3C candidat de mise en page appelée "flexbox" qui prend en charge ce problème et bien d'autres. Pour atteindre la même hauteur de boîtes de vous serait tout simplement d'attribuer la propriété display: flex à l'UL et display: block le LIs à l'intérieur.

    Exemple (CodePen)

    Il ne va pas vous obtenir de très loin si vous avez besoin de soutenir les anciens navigateurs 🙂 mais si vous pouvez obtenir autour de cette méthode est facile et super cool.

    Référence: Un Guide Complet pour Flexbox

  3. 3

    Je ne pense pas qu'il y est un moyen, sauf javascript, pour ce faire; ma recommandation serait de définir une hauteur et peut-être un overflow:auto ainsi, dans le cas que le contenu déborde de ne pas paralyser votre site et de vos lecteurs peuvent toujours voir votre contenu.

  4. 1

    D'abord, si vous réglez votre marge sur les 4 côtés il sera un espace un peu mieux sur le flux de la ligne nouvelle.

    Seconde, vous pouvez spécifier un min-height qui est plus proche de quelque chose de commun dans tous les domaines, ou à exécuter JavaScript pour les mettre dans la même ligne étant donné une certaine largeur.

  5. 1

    Quand vous avez plus de divs et donc plus de lignes, sans ligne-divs (conteneur divs que marque une ligne), puis l'exemple suivant de CSS Astuces fait ce que vous avez besoin de:

    L'égalité de la Hauteur des Blocs dans les Lignes

    Le code suivant a huit éléments de la liste. Lorsque trois ou quatre articles sont affichés par rôle, puis l'exemple donné fera tous les divs de hauteur égale par ligne. 

    <div id="blocks">
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>