垂直排序DIV [英] Sorting DIVs vertically

问题描述

我目前正在开发一种设计，需要多个< DIV> 元素排序垂直，同时保持其响应能力。

I'm currently working on a design that requires multiple <DIV> elements sorted vertically but also keeping its ability to be responsive.

示例：

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

I've used floats, inline-block display and even resorted to crudely putting it together with jQuery but all elements sort horizontally.

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

Looking around I can't seem to find any others with the same issue or solutions so any assistance would be great.

推荐答案

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

If you're not too concerned about cross-browser support (and just want to make it prettier in the compliant/up-to-date browsers), or are happy to use a JavaScript shim, of some kind, to enable support in other browsers, you could use column-width to define the width of the columns and then allow the browser to reflow those columns to accommodate the content:

.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 元素相同的方式设置父/容器的样式，并根据需要设置子元素的样式。

Clearly I've used li and ul elements for the purposes of the demo, but this is directly transferable to div elements if you prefer. Simply style the parent/container in the same fashion as the above ul element, and style the child elements as you like.

参考文献：

• CSS多列布局。

• CSS Multi-column layout.

这篇关于垂直排序DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！