¿Cómo obtener una grilla de elementos de la lista de altura igual?

Question

Estoy tratando de hacer una grilla de productos utilizando elementos de lista y inline-block. El problema es: el contenido de los bloques tiene alturas variables y el inline-block no mantiene las alturas iguales.

El código:

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

Here's an image to illustrate the issue.

Necesito los bloques para mantener la misma altura de los bloques más grandes, independientemente de su contenido. ¿Es posible hacer algo como this?

Y, por último: Lo sentimos, Inglés no es mi lengua madre :)

Answer 1

1. Agregando lo siguiente al li CSS imitará el ejemplo de la imagen que proporcionó.

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

2., aquí hay algunos otros enfoques:

• http://demo.smartnetzone.com/same-height-columns-using-jquery/
• http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
• http://www.cssnewbie.com/equalheights-jquery-plugin/

Answer 2

En primer lugar, si se ajusta el margen de estar en los 4 lados Será espaciar un poco mejor en el flujo de nueva línea.

En segundo lugar, puede especificar una altura mínima más cercana a algo común para todas las áreas, o ejecutar JavaScript para establecerlas en una línea dada un ancho particular.

Answer 3

No creo que haya una manera, salvo javascript, para hacer esto; Mi recomendación sería establecer una altura definida y tal vez un overflow:auto así que en el caso de que el contenido se desborde no paraliza su sitio y sus lectores aún pueden ver su contenido.

Answer 4

Hay un diseño candidato W3C llamado "FlexBox" que toma coche e de este problema y muchos otros. Para lograr las casillas de igual altura, simplemente debe asignar la propiedad display: flex a UL y display: block a las LI dentro de esta.

Example (CodePen)

No va a llegar muy lejos si es necesario apoyar los navegadores antiguos :) pero si se puede obtener en torno a que este método es fácil y super cool.

Referencia: A Complete Guide to Flexbox

Answer 5

cuando se tiene más divs y por lo tanto más filas, sin fila-divs (DIV contenedor que marcan una fila), entonces el siguiente ejemplo de trucos CSS hace lo que necesita:

Equal Height Blocks in Rows

El siguiente código tiene ocho elementos de lista. Cuando solo se muestran tres o cuatro elementos por rol, el ejemplo dado hará que todos los divs sean iguales en altura por fila.

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