javascript - 响应式设计,乱序堆叠div

标签 javascript jquery html css

我想知道是否有一种纯 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/

相关文章:

javascript - 为什么我在 Laravel 框架中收到此内部服务器错误?

javascript - JQuery/Javascript block 缩放

javascript - Recaptcha 不显示在 ipad 到移动设备上

javascript - Jquery Noty 插件与 MVC 5 Ajax BeginForm

javascript - 为什么 this 在这两种情况下引用的关键字不同?

php - 显示实时

javascript - 如何在 Angularjs 中使用超时功能切换 div 层?

html - 在流畅的布局中居中文本

javascript - 事件监听器在 Owl Carousel 中不起作用

javascript - 在javascript中相乘无法得到正确答案