css浮动元素具有不等的高度左和上在网格 [英] css float elements with unequal heights left and up in grid

问题描述

我想知道如何实现图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> 
  

我想让每个元素尽可能向左浮动，但同时向上浮动。 / p>

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

：

对我来说，整个网格位于网页中心很重要。这就是为什么我使用display：inline-block。

解决方案

您可以使用流行图书馆 Masonry 。

动态jQuery的布局插件CSS浮动的反面

这里是一个代码 example ...

  $ container）。masonry（{
 itemSelector：'.box'
}）; 
  

这是 Github ，并在Shoptalk播客上采访 David Desandro 。

对于不使用jQuery的用户，请注意，还有 Vanilla Masonry

提示：确保父容器具有position：relative，因此所有内容都绑定到您的容器。

I'm wondering how I can accomplish the effect in figure 1.

What I have got so far is

.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)

My HTML code looks something like this:

<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?

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.

解决方案

You can use the popular library Masonry.

A dynamic layout plugin for jQuery The flip-side of CSS floats

Here is a code example...

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

Here is the source on Github and an interview with David Desandro on the Shoptalk podcast.

For folks that aren't using jQuery, note that there's also Vanilla Masonry which is the framework-free version.

Tip: Make sure the parent container has position:relative so all the content is bound to your container.

这篇关于css浮动元素具有不等的高度左和上在网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！