1

我正在尝试使用 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 元素耦合在一起（因此 display:table 布局可能不是一个选项）。

在桌面视图中，元素 1 需要与元素 2 具有相同的高度，元素 3 需要与元素 4 相同，等等，但高度是事先不知道的，我不想使用 JavaScript（所以浮动是一样的不同的高度，除非有使用 CSS calc 的方法）。

那么，假设 1-8 都是来自同一个父 div 的部分元素，那么没有 JavaScript 怎么可能实现呢？

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

4

3 回答 3

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

于 2013-06-25T14:19:06.117 回答
1

像这里一样浮动 3、4、7 和 8：http: //jsfiddle.net/KH584/

.three, .four, .seven, .eight{
    float:right;
}
于 2013-06-25T13:52:16.110 回答
0

根据 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

于 2013-06-25T19:42:38.820 回答