根据设备宽度,使用CSS更改div顺序 [英] Change div order with CSS depending on device-width
问题描述
我在一个敏感的网站上工作,遇到一个有趣的问题。我有一些divs并排。可能有2到6个之间的任何地方。当屏幕不够宽以正确显示所有内容时,div垂直堆叠。对CSS很简单。
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.
问题是,我需要他们在不同的顺序,取决于布局。这是很容易做到2或3个div(根据宽度更改div顺序),但是当您添加第四个时显得更具挑战性。
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.
我可以使用 position:absolute;
为了使这个更复杂,我不能使用JavaScript。
To make this even more complicated, I can't use 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列:
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>
推荐答案
a href =https://drafts.csswg.org/css-flexbox-1/> flexbox 规范。使用 订单
和< a href =https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow> flex-flow
属性,我们可以实现你想要的。无预定义,IE11和所有常绿的浏览器将支持这一点。 IE10前缀 -ms-order
,不支持 flex-flow
。
This is doable in CSS now 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:
- 有给定顺序中的元素列表,显示为
- 当窗口太小时,将其更改为显示在列中。
- 更改元素的显示顺序
由于Stack Snippets的限制,您需要在全页面模式下查看演示,您的浏览器可查看效果。
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>
或者,这里有一个 JSFiddle 演示。
Alternatively, here is a JSFiddle demo.
这篇关于根据设备宽度,使用CSS更改div顺序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!