灵活的div定位

我在页面上有几个div，它们都有相同的宽度但高度不同。他们都在一个div，#note1PreviewDiv。他们都共享类.note，它具有以下的CSS代码（其他中）：灵活的div定位

.note{ 
    width: 160px; 
    padding: 10px; 
    margin: 10px; 
    background: #e3f0ff; 
    float: left; 
}

我想用float: left;他们都会自动对齐，使他们很好彼此之间对齐。

这里是什么样子的预览：

而这里的定位应该是什么样子：

我觉得你的想法。不知何故，在我看来，最左边的div的高度将第二排的其他div推向右边 - 但这只是猜测。

感谢您的帮助！

Charles

不可能只用css – SVS 2012-07-28 10:36:40

这是用CSS3！看到我的答案。但浏览器支持并不理想。 – 2012-07-28 10:39:50

你不能用CSS只做这个。

CSS3有一个称为列布局的新功能，但浏览器支持并不好。 IE9及以下版本不支持它。

请参阅http://designshack.net/articles/css/masonry/和CSS3解决方案的最后一个示例。

看一看更容易实现和浏览器的支持，这些JS/jQuery的选择：

2012-07-28 10:24:10

这是为我做的！我选择了砌体jQuery解决方案，它像一个魅力。但是，一个条件是元素要么具有固定的高度，要么从一开始就显示。所以我分配了固定的高度。 – weltschmerz 2012-07-28 13:45:12

那种铺陈你想真的很难（不可能？）没有去了基于列的方法，并增加额外的块级元素来代表每个列。如果你想要基于屏幕尺寸的动态布局，这显然不会适用于灵活的列数。

也就是说，您总是可以使用JavaScript将元素动态放置到列中，并使其与屏幕大小相匹配。

2012-07-28 10:28:53

父容器的高度是否为固定值？如果是，请尝试将父容器的高度设置为auto，并将overlow propery设置为隐藏。

2012-07-28 10:32:57 spaceman12

回答