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 - 使用 dropzone 上传文件后显示成功消息

javascript - 有没有JS函数可以求小数点前后的值

javascript - 使用 Cookie 隐藏显示内容

javascript - 受 jquery.selectBox 插件影响的表单选择框的更改值

jquery - 如何构造一个 URL 来打开带有 jquery lightbox 插件 colorbox 的页面?

javascript - 为什么我无法在 Javascript 中访问我的 html 元素

javascript - jQuery 动画 scrollTop 与 requestAnimationFrame - 性能

javascript - 我如何引用 JSON 列表中的特定元素?

javascript - 通过jquery重新排列html

html - Google 网络字体 (css) 与 photoshop 中的不同