我想知道是否有一种纯 CSS 方法可以在 3 个(或更多)div 小到足以将一个堆叠在另一个之上时乱序堆叠它们。
我的意思是,我按这个顺序有 3 个 div
| |
|[1] [2] [3]|
| |
我想把它们堆叠起来:
| |
|[3]|
|[1]|
|[2]|
| |
在 CSS 中有什么方法可以进行这种类型的堆叠吗?还是我必须为此使用 javascript?
最佳答案
我喜欢使用表组来帮助我处理不利于文档流程的困难排序。
Fiddle
示例
<ul>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
CSS
ul {
display: table;
width: 100%;
}
ul li {
width: 33%;
text-align: center;
box-sizing:border-box;
}
.two {
display: table-footer-group;
/* Will be displayed at the bottom */
background-color: green;
}
.one {
display: table-row-group;
/* Will be displayed in the middle */
background-color: yellow;
}
.three {
display: table-header-group;
/* Will be displayed at the top */
background-color: lightblue;
}
@media (min-width: 600px) {
ul li {
float: left;
}
}
关于javascript - 响应式设计,乱序堆叠div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26640527/