如何使用 CSS 制作浮动顶部？

Question

我知道 CSS 只支持 float 属性的左值和右值，但是有没有实现浮动顶部的技术？我会尽力解释。我有以下代码：

 <div style="float:left">
<div style="float:left">
<div style="float:left">
....

使用此代码，每个 div 都会向左浮动，直到达到页面的右边界。我想垂直做同样的事情，这样每个 div 都放在前一个 div 的底部，然后，当达到页面的底部限制时，创建一个新列。有没有办法只使用 CSS（并可能编辑 HTML 代码）来做到这一点？

原文由 mck89 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

仅使用 CSS 执行此操作的唯一方法是使用 CSS 3，它不适用于所有浏览器（仅适用于最新一代的浏览器，如 FF 3.5、Opera、Safari、Chrome）。

事实上，对于 CSS 3，有一个很棒的属性：column-count，您可以像这样使用它：

 #myContent{
  column-count: 2;
  column-gap: 20px;
  height: 350px;
}

如果#myContent 正在包装您的其他 div。

更多信息在这里： http ://www.quirksmode.org/css/multicolumn.html

正如您在那里看到的那样，使用它有严重的局限性。在上面的示例中，如果内容溢出，它只会添加到另一列。在 mozilla 中，您可以使用 column-width 属性，该属性允许您根据需要将内容分成任意多的列。

否则，您将不得不在 Javascript 或后端中的不同 div 之间分发内容。

原文由 Guillaume Flandre 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

只需使用 vertical-align ：

 .className {
    display: inline-block;
    vertical-align: top;
}

原文由 Abhishek Goel 发布，翻译遵循 CC BY-SA 3.0 许可协议