css浮动元素在网格中左上角高度不等答案

【问题标题】：css float elements with unequal heights left and up in gridcss浮动元素在网格中左上角高度不等
【发布时间】：2012-07-11 04:41:03
【问题描述】：

我想知道如何才能实现图 1 中的效果。

到目前为止我得到的是

.box { display: inline-block; vertical-align: top; width: 100px;}

这给了我图 2 所示的结果。（注意：我知道我可以使用 float:left 完成相同的操作）

我的 HTML 代码如下所示：

<span class="box">A<br><br><br><br></span>
<span class="box">B<br></span>
<span class="box">C<br><br><br></span>
<span class="box">D<br><br><br></span>
<span class="box">E<br><br><br><br><br><br></span>
<span class="box">F</span>
<span class="box">G<br><br><br><br></span>
<span class="box">H<br></span>
<span class="box">I<br><br></span>

我希望每个元素尽可能向左浮动，但同时向上浮动。

是否可以使用纯 css 来做到这一点，还是需要一些 javascript？

编辑：

对我来说，将整个网格定位到页面中心很重要。这就是我使用 display:inline-block 的原因。网格也不应该固定在页面上，因为我希望它在调整窗口大小时重新排列。

【问题讨论】：

既然你已经在使用 jquery jquery masonry 你可能会感兴趣：masonry.desandro.com
@Chandu：太棒了。我现在正在尝试。您能否将其发布为答案，如果成功，我可以接受它；）
嗯，我很确定这可以单独使用 css 来实现。
@Christoph 你能告诉我怎么做吗？
您总是想要 3 列吗？你能添加更多标记吗？

标签： javascript jquery css layout

【解决方案1】：

您可以使用流行的库Masonry。

jQuery 的动态布局插件 CSS 浮动的另一面

这是一个代码example...

$('#container').masonry({
  itemSelector: '.box'
});

这是Github 上的来源以及 Shoptalk 播客上对David Desandro 的采访。

对于不使用 jQuery 的人，请注意还有 Vanilla Masonry，它是无框架版本。

提示：确保父容器具有 position:relative 以便所有内容都绑定到您的容器。

【讨论】：

@Jules：我添加了一个提示如何确保浮动元素留在您的容器中。
谢谢。我接受了 Chandu 的回答，因为他是第一个。不过，你的对我来说同样好。太糟糕了，我不能接受多个答案。
好吧，虽然 Chandu 写了一行评论，但我用更多信息制作了这个答案。我的坏;-)

【解决方案2】：

由于您已经在使用 jquery，jquery masonry 可能会让您感兴趣：http://masonry.desandro.com

【讨论】：

它有效，但不完全是我想要的。我应该提到我使用 display:inline-block 因为我想在页面上居中我的网格。 Masonry 将所有内容浮动到我的页面左侧，然后将我的框的位置更改为绝对位置。所以这些框没有与中心对齐。
哦，想通了。我可以使用 isFitWidth: true 将我的盒子容器居中并将我的盒子包装在一个居中的容器中。这里解释了masonry.desandro.com/demos/centered.html

【解决方案3】：

好吧，如果您只想支持最现代的浏览器，CSS3 multi-column layout 可能会有所帮助。这种方法的一个问题是它不会保持相同的顺序，但您可以在 HTML（或 Javascript）中使用顺序。

我在您的 span 周围添加了一个名为 #container 的容器。

#container { 
    -webkit-column-width: 100px; 
    -moz-column-width: 100px; 
    column-width: 100px; 
}

jsFiddle Demo

【讨论】：

太好了，这在未来会非常有用。但现在我会坚持使用 jquery 解决方案。
项目将因列布局而乱序