html - CSS解决元素自定义顺序折叠问题
问题描述
我有一组 div 元素需要以特定方式折叠,但我不知道该怎么做。这是未折叠的样子:
-------------
| 1 | 2 | 3 |
-------------
| 4 | 5 | 6 |
-------------
并崩溃:
---------
| 2 |
---------
| 1 | 3 |
---------
| 4 | 5 |
---------
| 6 |
---------
请注意,元素 2 位于顶部并全角显示。
因此,由于客户的制度要求(浏览器支持问题等),我需要一个非 flexbox 和非 JS 的解决方案来解决这个问题。
底部很容易,但我无法弄清楚某种浮动情况或以其他方式使元素 2 停留在顶部并使其周围的元素在其下方塌陷。我知道我可以将元素 2 从元素集合中拉出并将其绝对定位在父元素中,并在未折叠时将其覆盖到网格中,但是在这样的解决方案中的定位在一个浏览器或另一个浏览器中总是有点不稳定,看起来有点不对劲。
JS 并非完全不可能,但我真的不想这样做,因为我正在开发与此功能相关的许多其他 JS,我不想在那里增加复杂性。我会接受 flexbox 答案,因为我可以让客户相信这是解决它的唯一方法。谢谢!
解决方案
这是一个使用包装弹性框的解决方案,它使用order
属性来获取所需的布局。请注意使用order: -1
将第二个元素置于顶部。其余的都在摆弄width。
请参阅下面的演示:
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 class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
推荐阅读
- r - 代码 | 在 R 中发送 Outlook 电子邮件,循环多个电子邮件地址,电子邮件正文中的 html 表
- reactjs - 为什么调用这个变量会错过它包含的数组?
- c# - 滚动时在 MainLayout.razor 上呈现页面的 Blazor 元素
- mysql - 将大型 MySQL 表加载到 JSON 中的问题
- django - 输出
使用模板标签的标签
- reactjs - 图像不会出现在 Nextjs 和 Strapi 项目中
- graph - Neo4j,如何返回两个节点之间的路径多于一个的节点和关系
- java - 在 Camel 中开发并在 Camel k 中运行
- reactjs - 在 styledComponent 上添加单个或多个 className 不显示服务器上的样式
- linux - 如何在linux中使用for循环为多个具有不同名称的文件运行命令?