我通过将页面分成列解决了类似的问题。这些div基本上是在下面。这是一个简单的，只有CSS的解决方案，但它不是完美的。在页面底部有一个空白，在上面，顺序从水平顺序改为垂直顺序。

I solved a similar issue by dividing the page into columns. The divs are then basically underneath each other. This is a simple, CSS only solution, but it's not perfect. There is a gap at the bottom of the page, and above that, the order changes of course from a horizontal to a vertical ordering.

然而，它可能对于您。这是它用于的页面：

Nevertheless, it might be useful for you. This is the page it is used on:

http://www.eftepedia.nl/lemma/Categorie%C3%ABn

您可以使用CSS列执行此操作，如下所示：

You can do this with CSS columns, like this:

.container {
    -webkit-columns: auto 3; /* Chrome, Safari, Opera */
    -moz-columns: auto 3; /* Firefox */
    columns: auto 3;
}

对于盒子你可以使用 break- avoid-column; ，以避免它们打破多个列。
有关详情，请参阅此问题具体问题。

For the boxes you can use break-inside: avoid-column; to avoid them breaking over multiple columns. Also see this question for more information about specific issues with that.

将它们放在一个小小的例子中： http：// jsfiddle.net/02f4wqcm/

Bringing it together in a minimal example fiddle: http://jsfiddle.net/02f4wqcm/