css - 具有交替反转行且没有行标记的表格样式布局

Question

我正在尝试使用 CSS 实现以下布局，每个数字都是等宽的内容 block :

移动 View :

1
2
3
4
5
6
7
8

桌面 View :

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

请注意，3-4 和 7-8 在桌面布局中是相反的。

由于 3-4 和 7-8 没有语义链接，我宁愿不将它们与父 HTML 元素结合在一起(因此 display:table 布局可能不是一个选项)。

在桌面 View 中，元素 1 需要与元素 2 的高度相同，3 与 4 等的高度相同，但高度事先未知，我不想使用 JavaScript(因此 float 作为它们会有不同的高度，除非有一种使用 CSS calc 的方法。

那么，假设 1-8 都是来自同一父 div 的所有部分元素，如果没有 JavaScript，如何实现这一点？

我不确定是否有解决方案，但认为这是 CSS 应该能够支持的东西 - 因此答案可以包括草稿或基本上不受支持的 CSS。

Answer 1

Flexbox 可以做到这一点，但它需要事先知道究竟有多少元素。

http://codepen.io/cimmanon/pen/EDzGt

ul {
  width: 5em;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) { /* hide from experimental Firefox */
  ul {
    display: flex;
  }
}

li {
  -webkit-flex: 1 50%;
  -ms-flex: 1 50%;
  flex: 1 50%;
}

li:nth-child(3),
li:nth-child(5),
li:nth-child(6) {
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}

li:nth-child(4) {
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

li:nth-child(7) {
  -ms-flex-order: 4;
  -webkit-order: 4;
  order: 4;
}

li:nth-child(8) {
  -ms-flex-order: 3;
  -webkit-order: 3;
  order: 3;
}

请注意，这仅适用于支持 Flexbox 和 包装的浏览器。当前支持的浏览器:Chrome、Opera、IE10、Blackberry 10(Firefox 很快)。

http://caniuse.com/#search=flexbox