垂直排序DIV

我目前正在开发一种设计，需要垂直排序多个

元素，同时保持其响应能力。

---

例子：

更宽的布局

更高的布局

---

我使用了浮点数，内联块显示，甚至使用jQuery粗略地将它放在一起，但所有元素都是水平排序的。

环顾四周我似乎无法找到任何其他有相同问题或解决方案的人，所以任何帮助都会很棒。

Answer 1

如果您不太关心跨浏览器支持（并且只是想在兼容/最新的浏览器中使它更漂亮），或者很乐意使用某种类型的JavaScript填充程序来支持其他浏览器浏览器，您可以使用column-width来定义column-width ，然后允许浏览器重排这些列以适应内容：

 .gridbox { display: block; -webkit-column-width: 4em; -moz-column-width: 4em; -o-column-width: 4em; -ms-column-width: 4em; column-width: 4em; /* aesthetics, adjust to taste, only the above is important */ margin: 1em auto; padding: 1em; border: 1px solid #f90; border-radius: 1em; } 

JS小提琴演示 。

很明显，我已经将li和ul元素用于演示目的，但如果您愿意，这可以直接转移到div元素。 只需以与上述ul元素相同的方式设置父/容器的样式，并根据需要设置子元素的样式。

参考文献：

• CSS多列布局 。

Answer 2

你必须稍微改进你的html结构。 为了做到这一点，你必须有一个子容器到你的主容器，它将“分组”你的内容。 像这样的东西：

 // first example 
 
 1 2 
 ... 
 // second example 
 
 1 2 3 
 ...  

使用css限制组容器的宽度，您可能会获得所需的效果。