Question

我有一组需要以特定方式折叠的div元素，我不确定该怎么做。这是未折叠的样子：

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

然后倒塌：

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

请注意，元素2位于顶部并变为全角。

因此，由于客户的机构要求（浏览器支持问题等），我需要针对该问题的非flexbox和非JS解决方案。

底部很容易，但是我无法弄清楚某种浮动情况，否则无法使元素2停留在顶部并使周围的元素塌陷在下面。我知道我可以从元素集合中拉出元素2并将其绝对定位在父元素中，并在未折叠时将其覆盖在网格中，但是在这样的解决方案中，其定位总是在一个浏览器或另一个浏览器中有些奇怪，并且看起来有点偏离。

JS并不是完全没有问题，但我真的不想要，因为我正在开发许多与此功能相关的其他JS，并且我不想在此增加复杂性。我会接受flexbox的答案，因为我也许能够说服客户这是解决它的唯一方法。谢谢！

Answer 1

这是使用可包装弹性盒的解决方案，该解决方案使用order属性来获取所需的布局。注意使用'DataFrame' object is not callable将第二个元素移到顶部。其余的随身携带 width 。

请参见下面的演示

order: -1

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.wrapper>div {
  background: aliceblue;
  border: 1px solid blue;
  width: 50%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper div:nth-child(2) {
  width: 100%;
  order: -1;
}

.wrapper div:last-child {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .wrapper div:nth-child(2) {
    order: initial;
  }
  .wrapper>div {
    flex: 1 1 33%;
  }
}

元素自定义顺序折叠的CSS解决方案

1 个答案: