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

結果

它可以全部在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

我不知道這是你的意思，但他們一致：

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

Answer 3

添加到您的CSS：

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

並略微減少了寬度 - 的1px寬的邊框被添加到寬度，所以你最終以100％+ 6px結束，這意味着每行只顯示2個塊。

Answer 4

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

http://jsfiddle.net/NF7UY/

這是我的解決方案

Answer 5

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

有了CSS3，你可以這樣做：

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

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

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/