CSS float выровнять по верху

Question

Каков наилучший способ (без js) выровнять все ячейки (т. Е. Иметь три ячейки в строке в этом случае).

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

Результат

Все это можно увидеть в этомСкрипка .

Количество элементов в строке может измениться (т. Е. Я не знаю, где будет начинаться новая строка), а высота каждого элемента является переменной (т. Е. Не может форсировать высоту).

Answer 1

Вы можете использовать vertical-align, чтобы гарантировать, что текст блоков всегда вверху независимо от высоты.

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

https://css -tricks.com / альманах / свойства / объем / вертикали выравнивания /

Answer 2

Вам необходимо использовать clear:left; в первом элементе каждой новой строки.

С помощью CSS3 вы можете сделать:

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

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

Answer 3

Решение Flex-Box:

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

приводит к:

демо: http://jsfiddle.net/xja40zod/2/

Answer 4

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

http://jsfiddle.net/NF7UY/

Это мое решение

Answer 5

Добавьте это к вашему css:

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

и немного уменьшите ширину - к ширине добавляется граница 1px, так что в итоге вы получите 100% + 6px, что означает, что в каждой строке отображается только 2 блока.

Answer 6

Я не уверен, что это то, что вы имеете в виду, но они выровнены:

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