CSS浮动对齐在顶部

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

结果

这一切都可以在this Fiddle中看到。

每行的项目数量可能会发生变化（即，我不知道新行的开始位置），并且每个项目的高度都是可变的（即，不能强制高度）。

Answer 1

您可以使用vertical-align确保无论高度如何，块的文本始终位于顶部。

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

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

Answer 2

您需要在每个新行的第一个元素上使用clear:left;。

使用CSS3，您可以：

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

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

Answer 3

我不确定这是你的意思，但他们是一致的：

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

Answer 4

将此添加到您的css：

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

并略微减小宽度 - 将1px边框添加到宽度，因此最终得到100％+ 6px，这意味着每行只显示2个块。

Answer 5

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

http://jsfiddle.net/NF7UY/

这是我的解决方案

Answer 6

弹性盒解决方案：

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