表格式样布局，交替颠倒行，无行标记 [英] Table style layout with alternating reversed rows and without markup for rows

问题描述

我试图用CSS实现以下布局，每个数字都是一个宽度相同的内容块：

移动视图：

  1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
  

桌面视图：

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

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

由于3-4和7-8没有语义链接，所以我宁愿不将它们与父HTML元素结合在一起（因此显示：表格布局可能不是一个选项）。

在桌面视图中，元素1需要与元素2的高度相同，而3与4等同，但高度并不是事先知道的，我不知道我们不想使用JavaScript（所以漂浮是因为它们会有不同的高度，除非有使用CSS calc的方法）。

因此，假定1-8是所有来自同一父div的段元素，如何在没有JavaScript的情况下实现这一点？

我不确定是否有解决方案，但认为这应该是CSS能够支持 - 所以答案可以包括草稿或很大程度上不支持的CSS。

解决方案

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

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

  ul {
 width：5em; 
显示：-ms-flexbox; 
 display：-webkit-flex; 
 -webkit-flex-wrap：wrap; 
 -ms-flex-wrap：wrap; 
 flex-wrap：wrap; 
 
 @supports（flex-wrap：wrap）{/ *隐藏实验性的Firefox * / 
 ul {
 display：flex; 
} 
} 
 
 li {
 -webkit-flex：1 50％; 
 -ms-flex：1 50％; 
 flex：1 50％; 
} 
 
 li：第n个孩子（3），
 li：第n孩子（5），b $ b li：第n孩子（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（火狐将很快发布它）。

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

I'm trying to achieve the following layout with CSS, each number being a block of content of equal width:

Mobile view:

1
2
3
4
5
6
7
8

Desktop view:

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

Note that 3-4 and 7-8 are reversed in desktop layout.

As 3-4 and 7-8 aren't semantically linked, I'd rather not couple them together with a parent HTML element (so display:table layout is likely not an option).

In desktop view, element 1 needs to be the same height as element 2, and 3 the same as 4 etc, but the height is not known in advance and I don't want to use JavaScript (so floats are out as they would be different heights, unless there was a way of using CSS calc).

So, assuming 1-8 are all section elements from the same parent div, how could this be achieved without JavaScript?

I'm not sure there is a solution but think this is something CSS should be able to support - so answers can include draft or largely unsupported CSS.

解决方案

Flexbox could do this, but it requires knowing in advance exactly how many elements there are.

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;
}

Be aware that this will only work in browsers that support Flexbox and wrapping. Current browser support: Chrome, Opera, IE10, Blackberry 10 (Firefox will have it soon).

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

这篇关于表格式样布局，交替颠倒行，无行标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！