Question

我正在尝试使用CSS实现以下布局，每个数字都是一个宽度相等的内容块：

移动视图：

桌面视图：

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

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

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

在桌面视图中，元素1需要与元素2的高度相同，3与4等相同，但是事先不知道高度，我不想使用JavaScript（所以浮点数就像它们会有不同的高度，除非有一种方法可以使用CSS计算。）

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

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

Answer 1

向右浮动3,4,7和8 像这里：http://jsfiddle.net/KH584/

.three, .four, .seven, .eight{
    float:right;
}

Answer 2

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

Answer 3

根据cimmanon的回答以及随后的评论，我能够结合使用flexbox，包装和相对定位。

CSS：

ul {
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
@supports (flex-wrap: wrap) {
  ul {
    display: flex;
  }
}

li {
  -webkit-flex: 1 50%;
  -ms-flex: 1 50%;
  flex: 1 50%;
  outline: 1px solid red;
  width: 50%;
}

li:nth-child(4n) {
  position: relative;
  left: -50%;
}

li:nth-child(4n-1) {
  position: relative;
  left: 50%;
}

HTML：

<ul>
  <li>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
  <li>2</li>
  <li>3</li>
  <li>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>5</li>
  <li>6</li>
  <li>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>8</li>
</ul>

http://codepen.io/penx/pen/fnrJE

表格样式布局，交替反转行，没有行标记

3 个答案: