根据设备宽度使用 CSS 更改 div 顺序

2024-04-29

我正在开发一个响应式网站,遇到了一个有趣的问题。我有一些并排的 div。可能有 2 到 6 个左右。当屏幕不够宽而无法正确显示所有内容时,div 会垂直堆叠。使用 CSS 就足够简单了。

问题是,我需要它们根据布局采用不同的顺序。这很容易用 2 或 3 个 div 来完成(根据宽度更改 div 顺序 https://stackoverflow.com/questions/22159235/changing-divs-order-based-on-width),但当您添加第四个时,挑战明显更大。

我可以用position: absolute;并手动设置位置,但这会导致父级缩小并且无法正确包含它们。

更复杂的是,我无法使用 JavaScript。

使用两列:

(未经测试)

HTML:

<div id="container">
    <div class="column-half column-half-2">
        First div on mobile, right div on desktop
    </div>
    <div class="column-half column-half-1">
        Second div on mobile, left div on desktop
    </div>
</div>

CSS:

.container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 20px;
    position: relative;
}
.column-half {
    display: table-cell;
    padding: 25px;
    vertical-align: top;
    width: 40%;
}
.column-half-1 {
    float: left;
}
.column-half-2 {
    float: right;
}

HTML,有 4 列:

<div id="container">
    <div class="column-quarter column-quarter-3">
        First div on mobile, third div on desktop
    </div>
    <div class="column-quarter column-quarter-2">
        Second div on mobile, second div on desktop
    </div>
    <div class="column-quarter column-quarter-1">
        Third div on mobile, first div on desktop
    </div>
    <div class="column-quarter column-quarter-4">
        Fourth div on mobile, fourth div on desktop
    </div>
</div>

这在 CSS 中是可行的,这要归功于精彩的flexbox https://drafts.csswg.org/css-flexbox-1/规格使用order https://developer.mozilla.org/en-US/docs/Web/CSS/order and flex-flow https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow属性,我们可以实现您想要的。无前缀,IE11 和所有常青浏览器都将支持此功能。 IE10 前缀-ms-order并且不支持flex-flow.

该解决方案考虑了您列出的所有限制:

  • 将给定顺序的元素列表显示为一行。
  • 当窗口太小时,将它们更改为以列形式显示。
  • 当元素显示在列中时更改元素的顺序。

由于 Stack Snippets 的限制,您需要在全页模式下查看演示,并调整浏览器大小才能看到效果。

.container div {
    width: 100px;
    height: 50px;
    display: inline-block;
}

.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }

@media screen and (max-width: 531px) {
    .container { display: flex; flex-flow: column; }
    .five { order: 1; }
    .four { order: 2;  }
    .three { order: 3; }
    .two { order: 4; }
    .one { order: 5 }
}
<div class="container">
    <div class="one">I'm first</div>
    <div class="two">I'm second</div>
    <div class="three">I'm third</div>
    <div class="four">I'm fourth</div>
    <div class="five">I'm fifth</div>
</div>

或者,这里有一个JSFiddle http://jsfiddle.net/chdhhm74/ demo.


您也可以简单地使用flex-flow: column-reverse没有order分配给每个 div 的属性(如果您非常反对冗长的 CSS)。相同的演示限制适用;全屏查看此演示并相应地调整浏览器窗口的大小。

.container div {
    width: 100px;
    height: 50px;
    display: inline-block;
}

.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }

@media screen and (max-width: 531px) {
    .container { display: flex; flex-flow: column-reverse; }
}
<div class="container">
    <div class="one">I'm first</div>
    <div class="two">I'm second</div>
    <div class="three">I'm third</div>
    <div class="four">I'm fourth</div>
    <div class="five">I'm fifth</div>
</div>

值得指出的是flex-flow是包含两者的简写属性flex-direction and flex-wrap特性。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

根据设备宽度使用 CSS 更改 div 顺序 的相关文章

随机推荐

  • R Doplot() 坐标定位器()

    我绘制了 2 个 fasta 序列的点图 使用 seqinr 包中的 dotPlot 我需要从图中提取一些值 x y Dotplot 输出是图像 通用点图可能就是这个 例如 我需要局部对齐的开始和结束值 由紫色线表示所以这里有一个例子 l
  • 了解 JAXB @XmlRootElement 注释

    我正在使用教程在这里 http www vogella com articles JAXB article html jaxb用于理解 JAXB 当作者开始创建文档的根时 作者开始如下 This statement means that c
  • 在rails生产环境中禁用服务器端缓存

    我即将部署一个包含敏感数据的应用程序 因此 不应将任何数据存储到磁盘上 有没有办法禁用服务器端缓存 我找不到任何 我碰巧遇到了这个问题 并且假设您不再需要答案 但是 我相信您正在寻找的是以下内容 config action controll
  • 在javascript中将字符串转换为数字

    我想解析包含经度和纬度的用户输入 我想做的是将字符串强制转换为数字 保留其符号和小数位 但我想做的是当用户输入无效时显示一条消息 我应该遵循哪一个 parseFloat x second new Number x third x fourt
  • 我的 ViewModel 列表中每个项目的数据验证

    要使用正则表达式进行验证 我通常这样做 In my ViewModel RegularExpression MyRegex ErrorMessageResourceName MyErrorMessage public string MyFi
  • 写入 BigQuery 时处理卡住

    我正在使用云数据流将数据从 Pub Sub 消息导入到 BigQuery 表 我正在使用 DynamicDestinations 因为这些消息可以放入不同的表中 我最近注意到该进程开始消耗所有资源 并且消息表明该进程被卡住开始显示 Proc
  • Python 词干分析器问题:词干错误

    你好 我正在尝试用 python 词干分析器来词干 我尝试了 Porter 和 Lancaster 但他们也有同样的问题 他们无法正确阻止以 er 或 e 结尾的单词 例如 它们源于 computer gt comput rotate gt
  • Knockout 将 css 类绑定到观察到的模型属性

    我想将 divs css 类绑定到视图模型的属性 如下所示 div 但这会产生结果 div class 0 1 2 3 这是视图模型 myViewModel selectedPriority ko observable High Compa
  • 什么时候调用CloseHandle?

    我有一个主线程 它接收需要一些时间的操作 所以我创建一个线程并将工作委托给它 当主线程接收作业时 将调用此执行函数 每个作业都执行此执行 Return type execute Arguments here if a file read c
  • Google Chrome 的互联网历史记录脚本

    我并不是在寻找 最佳 或最有效的脚本来执行此操作 但我想知道是否存在一个脚本可以从 Google Chrome 中提取一天的互联网历史记录并将其记录到 txt 文件中 我更喜欢用 Python 或 MATLAB 编写 如果你们有不同的方法
  • mysqli_fetch_assoc() 期望参数 1 为 mysqli_result,布尔值给出

    看来我的 mysqli query 不起作用 我该怎么办 在密码附近的查询中使用 AND 而不是逗号 这就是查询返回 false 并抛出该错误的原因 select
  • 绘制 UML 时何时使用属性(属性)而不是关联/聚合/组合

    好吧 我有点困惑 当尝试在 UML 图中显示关系时 我应该向类添加属性 还是绘制与类的关联 例如 假设我有一个 DFA 类 其中包含 10 个状态对象 每个状态对象都有一组不同的通往 DFA 中各种状态的路径 我应该绘制从 DFA 到 St
  • 使用 SharpPcap 和 Packet.Net 发送我自己的 ARP 数据包

    到目前为止 我尝试使用 SharpPcap 发送我用 Packet Net 创建的 ARP 数据包 但没有成功 问题是即使我使用发送数据包device SendPacket它实际上没有被发送 我不知道为什么 这是我的代码 ARPPacket
  • 使用PHP exec调用Node脚本并在finally方法之前将数据返回给PHP

    我有一个 PHP 脚本 它使用exec函数来执行 Node 脚本并将一些数据返回到同一 PHP 脚本 我的问题是我需要将数据返回给 PHP 而不必等待中的清理代码finally完成 我在下面编写了一些示例代码 向您展示代码的流程并说明我的问
  • 如何通过函数参数使用 fstream(特别是 ofstream)

    嗨 我是一个c 初学者 这是我的作业之一 我有点卡住了 这不是我的全部代码 它只是我需要帮助的一小部分 我想做的是有一个函数专门用于将具有该函数的所有内容导出到text文件名为 results txt 因此 当我打开文件时 应该会显示 do
  • 将 Ruby 程序作为 Windows 服务运行?

    是否可以将 ruby 应用程序作为 Windows 服务运行 我看到有一个相关的问题讨论运行Java 应用程序作为 Windows 服务 https stackoverflow com questions 25530 best method
  • 如何在android中使用Ontouchevent突出显示此pdf页面

    这里我想使用android中的onTouchevent来突出显示这段文字 您可以使用 OnTouchListener 来获取事件的 x 和 y 然后将屏幕绘制为位图 并根据字母的左上角显示和字母的大小使用bitmap getPixel 看看
  • WSO2 API 管理器 - 我可以隐藏公共商店中的租户商店吗?

    是否可以隐藏租户商店 以便它们在公共商店中不可见 而只能通过其直接租户特定商店 URL 可见 例如 https api mydomain com store tenant mycustomer com https api mydomain
  • struct{} 和 struct{}{} 在 Go 中如何工作?

    我想知道 Go 中的 struct 和 struct 是什么意思 示例如下 array index struct or make map type struct struct is a keyword https golang org re
  • 根据设备宽度使用 CSS 更改 div 顺序

    我正在开发一个响应式网站 遇到了一个有趣的问题 我有一些并排的 div 可能有 2 到 6 个左右 当屏幕不够宽而无法正确显示所有内容时 div 会垂直堆叠 使用 CSS 就足够简单了 问题是 我需要它们根据布局采用不同的顺序 这很容易用