如何使用CSS创建浮动顶部？

Question

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

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

在这段代码中，每个div都是向左浮动的，直到到达页面的右边为止。我想垂直地做同样的事情，这样每个div都放在前一个div的底部，然后，当页面达到底部限制时，就会创建一个新的列。有没有办法只使用CSS (也许还可以编辑HTML代码)来做到这一点？

Answer 1

要做到这一点，唯一的办法就是使用CSS 3，它不会在所有的浏览器上都能工作(只有最新一代的浏览器，比如FF 3.5，Opera，Safari，Chrome)。

实际上，在CSS3中有一个很棒的属性: 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之间分发内容。

Answer 2

只需使用vertical-align

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

Answer 3

Hugogi Raudel想出了一种有趣的方法来通过CSS来实现这一点。假设下面是我们的HTML标记：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li> 
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

您可以使用以下CSS代码实现一个3行的列：

li:nth-child(3n+2){
  margin: 120px 0 0 -110px;
}

li:nth-child(3n+3) {
  margin: 230px 0 0 -110px;
}

下面是最终结果：

我们在这里所做的是为行中的每一项添加适当的边距。这种方法的限制是您必须确定列行计数。它不会是动态的。我确信它有用例，所以我在这里包含了这个解决方案。

这里是一个现场演示：http://codepen.io/HugoGiraudel/pen/DoAIB

• You可以在雨果的blog post

中阅读更多关于

• 的内容