css - 灵活的div定位

Question

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

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

我认为float: left;它们都会自动对齐，以便它们彼此之间很好地对齐。

这是它的外观预览：

定位应该是这样的：

我想你应该已经明白了。不知何故，在我看来，最左边的 div 的高度将第二行中的其他 div 推到了右边——但这只是猜测。

谢谢你的帮助！

查尔斯

score 3 · Accepted Answer

仅使用 CSS 将无法轻松做到这一点。

CSS3 有一个新特性叫做列布局，但是浏览器支持不是很好。IE9及以下不支持。

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

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

score 0 · Accepted Answer

如果不采用基于列的方法并添加额外的块元素来表示每一列，那么您想要的那种布局真的很难（不可能？）。如果您想要基于屏幕大小的动态布局，这显然不适用于灵活数量的列。

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

score 0 · Accepted Answer

父容器的高度是否给定一个固定值？如果是，请尝试将父容器的高度设置为自动，并将过低的属性设置为隐藏。

3 回答 3