Alineación flotante CSS en la parte superior

Question

¿Cuál es la mejor forma (sin js) para alinear todas las celdas (es decir, tener tres celdas por fila en este caso).

HTML

<ul id="list"> 
    <li>Line1 this is a very long line that will break the layout</li> 
    <li>Line2</li> 
    <li>Line3</li> 
    <li>Line4 this is a very long line that will break the layout</li> 
    <li>Line5</li> 
    <li>Line6</li> 
    <li>Line7 this is a very long line that will break the layout</li> 
    <li>Line8</li> 
    <li>Line9</li> 
</ul> 

CSS

#list li{ 
    float: left; 
    width: 33%; 
    border: 1px #000 solid; 
} 

Resultado

Todo se puede ver en this Fiddle.

El número de elementos por línea puede cambiar (es decir, no sé dónde comenzará la nueva línea) y la altura de cada uno es variable (es decir, no puede forzar la altura).

Answer 1

Puede utilizar vertical-align para asegurar que el texto de los bloques están siempre en la parte superior independientemente de la altura.

#list li { 
    display:inline-block; 
    vertical-align:top; 
} 

https://css-tricks.com/almanac/properties/v/vertical-align/

Answer 2

no estoy seguro de que esto es lo que quieres decir, pero están alineadas:

#list li{ 
    float: left; 
    width: 33%; 
    border: 1px #000 solid; 
    min-height:40px; 
} 

Answer 3

Agregar a su css:

display: inline-block; 
height: 3em; /* adjust to fit largest content in any of the blocks */ 

y reducir la anchura ligeramente - la frontera 1px se agrega al ancho, por lo que terminas con 100% + 6px, lo que significa que solo aparecen 2 bloques por línea.

Answer 4

#list li{ 
    display:inline-block; 
    width: 30%; 
    border: 1px #000 solid; 
} 

http://jsfiddle.net/NF7UY/

Esa es mi solución

Answer 5

Es necesario utilizar clear:left; en el primer elemento de cada nueva línea.

Con CSS3 que puede hacer:

#list li:nth-of-type(3n+1) { 
    clear:left; 
} 

http://reference.sitepoint.com/css/pseudoclass-nthoftype

Answer 6

La solución flexible cuadro:

#list { 
    display: flex; 
    flex-wrap: wrap; /*allows items to flow into a new row*/ 
} 
#list li { 
    width: 33%; 
    border: 1px #000 solid; 
} 

resultados en:

demo: http://jsfiddle.net/xja40zod/2/