- 首页
- 前端开发
- 根据设备宽度使用 CSS 更改 div 顺序
根据设备宽度使用 CSS 更改 div 顺序
[英] Change div order with CSS depending on device-width
本文介绍了根据设备宽度使用 CSS 更改 div 顺序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在一个响应式网站上工作，遇到了一个有趣的问题.我有一些 div 并排.可能有 2 到 6 个左右.当屏幕宽度不足以正确显示所有内容时，div 会垂直堆叠.使用 CSS 就足够简单了.
问题是，我需要它们根据布局采用不同的顺序.这很容易使用 2 或 3 个 div(根据宽度更改 div 顺序)，但是当您添加第四个时，难度会更大.
我可以使用 position: absolute; 并手动设置位置，但是这会导致父级缩小并且不能正确包含它们.
为了让这更复杂，我不能使用 JavaScript.
使用两列:
(未经测试)
HTML:
<div class="column-half column-half-2">移动设备上的第一个 div，桌面上的右侧 div
<div class="column-half column-half-1">移动设备上的第二个 div，桌面上的左 div
CSS:
.container {宽度:80%；最大宽度:1200px；边距:0 自动；填充底部:20px；位置:相对；}.column-half {显示:表格单元格；填充:25px；垂直对齐:顶部；宽度:40%；}.column-half-1 {向左飘浮;}.column-half-2 {浮动:对；}
HTML，4 列:
<div class="column-quarter column-quarter-3">移动设备上的第一个 div，桌面上的第三个 div
<div class="column-quarter column-quarter-2">移动设备上的第二个 div，桌面上的第二个 div
<div class="column-quarter column-quarter-1">移动设备上的第三个 div，桌面上的第一个 div
<div class="column-quarter column-quarter-4">移动设备上的第四个 div，桌面上的第四个 div
解决方案
由于出色的 flexbox 规范.使用 order 和 flex-flow 属性，我们可以达到你想要的.无前缀，IE11 和所有常青浏览器都将支持这一点.IE10 前缀 -ms-order 并且不支持 flex-flow.
该解决方案考虑了您列出的所有限制条件:
- 将给定顺序的元素列表显示为一行.
- 当窗口太小时，将它们更改为在列中显示.
- 更改元素在列中的显示顺序.
由于 Stack Snippets 的限制，您需要以整页模式查看演示，并调整浏览器大小以查看效果.
.container div {宽度:100px；高度:50px；显示:内联块；}.one { 背景:红色；}.二{ 背景:橙色；}.三{背景:黄色；}.四{背景:绿色；}.五{背景:蓝色；}@media 屏幕和(最大宽度:531px){.container { display: flex;弹性流:列；}.五{订单:1;}.四{顺序:2;}.三{顺序:3;}.二{顺序:4;}.one { 订单:5 }}
<div class="one">我是第一个</div><div class="two">我是第二个</div><div class="three">我是第三个</div><div class="four">我是第四个</div><div class="five">我是第五个</div>
或者，这里有一个 JSFiddle 演示.
<小时>如果您不喜欢冗长的 CSS，您也可以简单地使用 flex-flow: column-reverse 而不将 order 属性分配给每个 div.相同的演示限制适用；以全屏方式查看此演示并相应地调整浏览器窗口的大小.
.container div {宽度:100px；高度:50px；显示:内联块；}.one { 背景:红色；}.二{ 背景:橙色；}.三{背景:黄色；}.四{背景:绿色；}.五{背景:蓝色；}@media 屏幕和(最大宽度:531px){.container { display: flex;flex-flow: 列反向；}}
<div class="one">我是第一个</div><div class="two">我是第二个</div><div class="three">我是第三个</div><div class="four">我是第四个</div><div class="five">我是第五个</div>
值得指出的是，flex-flow 是一个包含 flex-direction 和 flex-wrap 属性的简写属性.
I am working on a responsive site and came across an interesting problem. I have some divs side by side. There could be anywhere from 2 to 6 or so of them. When the screen isn't wide enough to show all the content properly, the divs stack vertically. Simple enough to do with CSS.
The problem is, I need them to be in a different order depending on the layout. This is easy to do with 2 or 3 divs (Changing divs order based on width), but significantly more challenging when you add a fourth.
I could use position: absolute; and manually set the position, however this causes the parent to shrink and not contain them properly.
To make this even more complicated, I can't use JavaScript.
Working with two columns:
(untested)
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, with 4 columns:
<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>
解决方案
This is doable in CSS thanks to the wonderful flexbox spec. Using the order and flex-flow properties, we can achieve what you want. Unprefixed, IE11 and all evergreen browsers will support this. IE10 prefixes -ms-order and doesn't support flex-flow.
The solution takes into consideration all the constraints you listed:
- Have a list of elements in a given order displayed as a row.
- When the window is too small, change them to display in a column.
- Change the order of the elements when they are displayed in a column.
Because of the limitations of Stack Snippets, you'll need to view the demo in Full page mode, and resize your browser to see the effect.
.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>
Alternatively, here is a JSFiddle demo.
You can also simply use flex-flow: column-reverse without the order property assigned to each div, if you are so inclined against verbose CSS. The same demo restrictions apply; view this demo in full screen and resize the browser window accordingly.
.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>
It's worth pointing out that flex-flow is a shorthand property encompassing both flex-direction and flex-wrap properties.
这篇关于根据设备宽度使用 CSS 更改 div 顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
