使用CSS显示不同大小的div [英] Display divs with different sizes with CSS

问题描述

如何显示不同高度的div，使它们彼此接近，不管它的高度和像建筑物一样的特定边距

我的意思是像这个网站的div http://via.me

我使用flaot：left，但它只与最后一个div浮动并留下一个空白的空格
这是我使用的代码 http://jsfiddle.net/D9rHB/6/

how can I display divs with different height to be close to each other regardless of its height and with a specific margin just like buildings
I mean something like the divs in this website http://via.me
I used flaot:left but it floats only with the last div and leaves an empty spaces this is the code that I used http://jsfiddle.net/D9rHB/6/

推荐答案

我认为jQuery Masonry 插件将是您在此实例中查找的：

I think that the jQuery Masonry plugin would be what you're looking for in this instance:

Masonry是一个动态网格布局插件for jQuery。想想它是CSS浮动的反面。而浮动布置元素水平然后垂直，Masonry垂直排列元素，将每个元素定位在网格中的下一个开放点。

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

JS Fiddle demo 。

这篇关于使用CSS显示不同大小的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！