灵活的div定位

Question

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

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

我想float: left;他们会自动对齐，以便彼此很好地对齐。

以下是预览：

Current state http://posti.sh/img/ist.png

这就是定位应该是什么样的：

Desired state http://posti.sh/img/soll.png

我想你明白了。不知怎的，在我看来，最左边的div的高度将第二行中的其他div推向右边 - 但这只是猜测。

感谢您的帮助！

查尔斯

Answer 1

您只能使用CSS轻松完成此操作。

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

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

查看这些js / jQuery选项，以便更轻松地实现和支持浏览器：

• masonry
• isotope
• vanilla masonry，不需要jQuery。
• wookmark

Answer 2

你想要的那种布局真的很难（不可能吗？）而没有采用基于列的方法并添加额外的块元素来表示每一列。如果您想要基于屏幕尺寸的动态布局，这显然不会使用灵活的列数。

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

Answer 3

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