CSS 浮动对齐在顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6961310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS float align at top
提问by montrealmike
What is the best way (without js) to make all cells align (ie, have three cells per row in this case).
使所有单元格对齐的最佳方法是什么（没有js）（即在这种情况下每行有三个单元格）。
HTML
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
CSS
#list li{
float: left;
width: 33%;
border: 1px #000 solid;
}
Result
结果
It can all be seen in this Fiddle.
这一切都可以在这个 Fiddle 中看到。
The number of items per line may change (ie, I don't know where the new line will start), and the height of each is variable (ie, cannot force height).
每行的项目数可能会发生变化（即我不知道新行从哪里开始），并且每个的高度是可变的（即不能强制高度）。
回答by js1568
You can use vertical-alignto ensure that the text of the blocks are always at the top regardless of height.
vertical-align无论高度如何，您都可以使用来确保块的文本始终位于顶部。
#list li {
display:inline-block;
vertical-align:top;
}
回答by js1568
You need to use clear:left;on the first element of each new line.
您需要clear:left;在每个新行的第一个元素上使用。
With CSS3 you can do:
使用 CSS3，您可以执行以下操作：
#list li:nth-of-type(3n+1) {
clear:left;
}
回答by Crisman
The flex-box solution:
弹性盒解决方案：
#list {
display: flex;
flex-wrap: wrap; /*allows items to flow into a new row*/
}
#list li {
width: 33%;
border: 1px #000 solid;
}
results in:
结果是：
回答by Diodeus - James MacFarlane
I'm not sure this is what you mean, but they're aligned:
我不确定这就是你的意思，但它们是一致的：
#list li{
float: left;
width: 33%;
border: 1px #000 solid;
min-height:40px;
}
回答by Marc B
Add this to your css:
将此添加到您的CSS：
display: inline-block;
height: 3em; /* adjust to fit largest content in any of the blocks */
and reduce the width slightly - the 1px border is added to the width, so you're ending up with 100% + 6px, meaning only 2 blocks show up per line.
并稍微减少宽度 - 1px 边框添加到宽度，所以你最终得到 100% + 6px，这意味着每行只显示 2 个块。
回答by Joseph Marikle
#list li{
display:inline-block;
width: 30%;
border: 1px #000 solid;
}
That's my solution
这就是我的解决方案
