javascript css浮动元素在网格中左右高度不等
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11434756/
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 elements with unequal heights left and up in grid
提问by Jules Colle
I'm wondering how I can accomplish the effect in figure 1.
我想知道如何实现图 1 中的效果。
What I have got so far is
到目前为止我所得到的是
.box { display: inline-block; vertical-align: top; width: 100px;}
.box { display: inline-block; vertical-align: top; width: 100px;}
This gives me the result illustrated in figure 2. (Notice: I'm aware I can accomplish the same with float: left)
这给了我图 2 所示的结果。（注意：我知道我可以用 float: left 完成同样的事情）
My HTML code looks something like this:
我的 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>
I want every element to be floated to the left as far as possible, but meanwhile floating upwards.
我希望每个元素都尽可能向左浮动，但同时向上浮动。
Is it possible to do this with pure css, or will i need some javascript?
是否可以用纯 css 来做到这一点，或者我需要一些 javascript？
EDIT:
编辑：
It is important for me that the entire grid is positioned to the center of the page. That's why I use display:inline-block. The grid should also not be fixed to the page because I want it to reflow when I resize my window.
将整个网格定位到页面的中心对我来说很重要。这就是我使用 display:inline-block 的原因。网格也不应该固定在页面上，因为我希望它在调整窗口大小时重排。
采纳答案by Split Your Infinity
You can use the popular library Masonry.
您可以使用流行的库Masonry。
A dynamic layout plugin for jQuery The flip-side of CSS floats
jQuery 的动态布局插件 CSS 浮动的另一面
Here is a code example...
这是一个代码示例...
$('#container').masonry({
itemSelector: '.box'
});
Here is the source on Githuband an interview with David Desandroon the Shoptalk podcast.
这是Github上的来源以及Shoptalk 播客上对DavidDesandro的采访。
For folks that aren't using jQuery, note that there's also Vanilla Masonrywhich is the framework-free version.
对于不使用 jQuery 的人，请注意还有Vanilla Masonry，它是无框架版本。
Tip:Make sure the parent container has position:relative so all the content is bound to your container.
提示：确保父容器具有 position:relative 以便所有内容都绑定到您的容器。
回答by Chandu
Since you are already using jquery, jquery masonry might interest you: http://masonry.desandro.com
由于您已经在使用 jquery，因此您可能会对 jquery masonry 感兴趣：http: //masonry.desandro.com
回答by kapa
Well, if you only aim to support the most modern browser, the CSS3 multi-column layoutcould help. One problem with this approach is that it will not keep the same order, but you can play with the order in the HTML (or Javascript).
好吧，如果您只想支持最现代的浏览器，CSS3 多列布局可能会有所帮助。这种方法的一个问题是它不会保持相同的顺序，但您可以使用 HTML（或 Javascript）中的顺序。
I added a container around your spans called #container.
我在您的跨度周围添加了一个名为#container.
#container {
-webkit-column-width: 100px;
-moz-column-width: 100px;
column-width: 100px;
}
