垂直排序DIV

Question

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

---

示例：

更广泛的布局

更高的布局

---

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

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

Answer 1

如果您不太关心跨浏览器支持（并且只想在兼容/最新的浏览器中使其更漂亮），或者很乐意使用某种类型的JavaScript填充程序来启用在其他浏览器中支持，您可以使用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 Fiddle demo

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

参考文献：

• CSS Multi-column layout。

Answer 2

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

// first example
<div id="main">
  <div class="group2">
    <span>1</span>
    <span>2</span>
  </div>
  ...
</div>

// second example
<div id="main">
  <div class="group3">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
  ...
</div>

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