Question

可能重复：
  How to stack divs from top to bottom in CSS
  How to make div stack first vertically then horizontally?

浮动或内联元素堆栈如下：

-----------------
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
-----------------

但我想像这样堆叠它们：

-----------------
| 1 | 3 | 5 | 7 |
| 2 | 4 | 6 | 8 |
-----------------

约束：任意数量的元素。所有相同的大小。所有元素必须位于相同的“级别”，这意味着我们不能堆叠div的“对”。

有可能吗？

编辑：忘记提及，容器应该水平展开，这样可以使用“固定”数量的“行”。

Answer 1

我有两个解决方案。

首先，使用CSS3 nth-of-type：

div:nth-of-type(even){margin:50px 0 0 -50px;}

这会优雅地降级为非indeal排序，但保留了一般格式。

此外，您可以通过在每个其他项目上放置一个类来实现类似的效果。

Demo

Answer 2

在父元素上将列数设置为4.

#your-parent-element-id {
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    column-count: 4;
    column-gap: 10px;
}

请注意，这只适用于相对较新的浏览器。

另请参阅：http://www.quirksmode.org/css/multicolumn.html

Answer 3

我相信所有浏览器中最易于管理的选项是将每个元素包装在另一个“列”div中：

<div class="column">
  <div>1</div>
  <div>2</div>
</div><div class="column">
  <div>3</div>
  <div>4</div>
</div><div class="column">
  <div>5</div>
  <div>6</div>
</div><div class="column">
  <div>7</div>
  <div>8</div>
</div>

...

div.column {
  width:25%
  float:left;
}

大多数html都是从服务器端编程语言提供的，通常带有某种模板引擎。在模板引擎（如ERB for Ruby或Smarty for PHP）中执行此操作非常简单。

对于“堆叠”高度问题，只需为内部div分配高度

div.column div {
  height:200px;
}

div的垂直堆栈顺序而不是水平？

3 个答案: