Płyn CSS wyrównany na górze

Question

Jaki jest najlepszy sposób (bez js) na wyrównanie wszystkich komórek (tj. W tym przypadku trzy komórki na wiersz).

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

Wynik

Wszystko można zobaczyć w this Fiddle.

Liczba pozycji w linii może się zmienić (tzn. Nie wiem, gdzie rozpocznie się nowa linia), a wysokość każdej z nich jest zmienna (tj. Nie może wymusić wysokości).

Answer 1

Można użyć vertical-align w celu zapewnienia, że ​​tekst z bloków są zawsze u góry, niezależnie od wysokości.

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

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

Answer 2

nie jestem pewien, że to, co masz na myśli, ale są wyrównane:

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

Answer 3

Dodaj to do Twojego CSS:

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

i zmniejszyć szerokość nieznacznie - obramowanie 1px jest dodawana do szerokości, więc kończysz z 100% + 6px, co oznacza, że ​​w każdym wierszu pojawiają się tylko 2 bloki.

Answer 4

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

http://jsfiddle.net/NF7UY/

To moje rozwiązanie

Answer 5

Trzeba użyć clear:left; na pierwszym elementem każdej nowej linii.

Z CSS3 można zrobić:

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

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

Answer 6

Rozwiązanie flex-box:

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

skutkuje:

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