我有一组需要以特定方式折叠的div元素,但我不确定该怎么做.这是未折叠的样子:
@H_301_6@------------- | 1 | 2 | 3 | ------------- | 4 | 5 | 6 | -------------
并崩溃了:
@H_301_6@--------- | 2 | --------- | 1 | 3 | --------- | 4 | 5 | --------- | 6 | ---------
请注意,元素2停留在顶部并变为全角.
因此,由于客户端的机构要求(浏览器支持问题等),我需要针对该问题的非flexBox和非JS解决方案.
底部很容易,但是我无法弄清楚某种浮动情况,否则无法使元素2停留在顶部并使周围的元素塌陷在下面.我知道我可以从元素集合中拉出元素2并将其绝对定位在父元素中,并在未折叠时将其覆盖在网格中,但是在这样的解决方案中,其定位总是在一个浏览器或另一个浏览器中有些奇怪,看起来有点不对劲
JS并不是完全没有问题,但我真的不想这么做,因为我正在开发许多与此功能相关的其他JS,并且我不想在此增加复杂性.我会接受flexBox的答案,因为我也许能够说服客户这是解决它的唯一方法.谢谢!
最佳答案
这是一个使用包装式FlexBox的解决方案,该包装使用
原文链接:https://www.f2er.com/html/530439.htmlorder
属性来获取所需的布局.注意使用顺序:-1将第二个元素移到顶部.其余的摆弄宽度.
请参见下面的演示:
@H_301_6@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%; } }
@H_301_6@<div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>