Html CSS：浮动时忽略divs高度

我想展示一些图片。它们的宽度相同，但高度不同。 我试着做一些类似的事情：

每个图片的类名都是pic

当每一行都垂直对齐在前一行的最高div之后时，最终结果不是预期的结果：

---

有没有办法解决我在纯跨浏览器css中遇到的问题？

遗憾的是，CSS2/3无法做到这一点

---

还有一个相当小的脚本，它模拟

float:top并且运行良好。
您是否能够添加一些额外的标记

如果是，则可以使用浮动div创建3列：

<div class="column">
    <img src="1.jpg" />
    <img src="4.jpg" />
</div>

<div class="column">
    <img src="2.jpg" />
    <img src="5.jpg" />
</div>

<div class="column">
    <img src="3.jpg" />
    <img src="6.jpg" />
</div>



或者只需使用jQuery就可以了。
如果您至少有一个包含元素，则可以使用CSS3
列计数来实现这一点，而不需要额外的标记

演示：

HTML:



CSS:

#容器{
列数：3；
列填充：平衡；
柱间距：10px；
宽度：330px；
}
.image{
显示：块；
边缘底部：10px；
宽度：100px；
} 

输出：

这是一个关于如何编写问题的很好的例子。听起来不错，但我在使用JSF2时尽量避免使用JS。为了添加到您选择的答案中，请确保为容器指定一个
min width
。如果不这样做，您的列将溢出。太好了！唯一的缺点是，我必须知道并指定所有图像的高度。@lonut不知道。我只是在演示中这样做来给出图像的高度。没必要。@lonut我用一些真实的图片更新了它，并删除了高度。太棒了；这就是为什么我喜欢学习新方法（并删除我的老式答案）
.pic{
    float:left
}

<div class="column">
    <img src="1.jpg" />
    <img src="4.jpg" />
</div>

<div class="column">
    <img src="2.jpg" />
    <img src="5.jpg" />
</div>

<div class="column">
    <img src="3.jpg" />
    <img src="6.jpg" />
</div>