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

结果

这一切都可以在这个小提琴中看到.

每行的项目数可能会改变(即,我不知道新行将从何处开始),并且每个项的高度都是可变的(即,不能强制高度).

Answer 1

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

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

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