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

概述我有一组需要以特定方式折叠的div元素,但我不确定该怎么做.这是未折叠的样子：------------- | 1 | 2 | 3 | ------------- | 4 | 5 | 6 | ------------- 并崩溃了：--------- | 2 | --------- | 1 | 3 | --------- | 4 | 5 | ------

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

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

并崩溃了：

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

请注意,元素2停留在顶部并变为全角.

因此,由于客户端的机构要求(浏览器支持问题等),我需要针对该问题的非flexBox和非Js解决方案.

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

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

最佳答案这是一个使用包装式FlexBox的解决方案,该包装使用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%;  }}

<div >  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div>  <div>6</div></div>

总结

以上是内存溢出为你收集整理的html-元素自定义顺序折叠的CSS解决方案 全部内容，希望文章能够帮你解决html-元素自定义顺序折叠的CSS解决方案 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。