使用CSS更改浮动div的顺序 [英] Change order of floated divs with CSS
问题描述
我想要以某个像素大小更改浮动div的顺序。
在默认状态下，它们都有50％的宽度，并且彼此相邻。
屏幕尺寸小于600px（或w / e无关紧要）我想要第二个div（红色）浮在第一个div之上（黄色的一个）。
使用CSS解决方案如何实现此功能？
HTML
$ b b
< div class =yellow>< / div>
< div class =red>< / div>
CSS
.yellow {
background：yellow;
width：50％;
height：300px;
float：left;
}
.red {
background：red;
width：50％;
height：300px;
float：left;
}
@media屏幕和（max-width：600px）{
。黄色{
背景：黄色;
width：100％;
height：300px;
float：left;
}
.red {
background：red;
width：100％;
height：300px;
float：left;
}
}
我想要的解决方案是：
RED DIV
YELLOW DIV
但现在是： / p>
YELLOW DIV
RED DIV
我知道你问的是如何使用浮动完成这个，但就我所知使用纯CSS这是不可能的（至少没有使用讨厌的定位，你说你不'
据我所知，使用纯HTML / CSS的唯一好方法是利用新的flexbox spec （一个好的起点可能是 当你使用flexbox时，你可以使用 您可以在操作中看到此示例在这里，HTML代码类似于你所拥有的，添加了一个封装元素（我也修正了DOCTYPE声明）： CSS有点不同： 我也清理了一点， 唯一的缺点是目前只能在大约80％的浏览器上使用的写作： http://caniuse.com/#search=flexbox 根据您的目标市场，可能会正常，您可以使用正常降级，以便它在所有方面正确显示，支持flexbox完全。 我想你也只是真正针对移动设备重新排序的东西，支持有好，所以它可能适合你。 I want to change the order of floated divs at a certain pixel size. At default state they both have 50% width and they are next to each other. Below 600px screen size (or w/e does not matter) I want the second div(red one) float above first div(yellow one). How is this possible with CSS only solution? HTML CSS The solution I want is: RED DIV YELLOW DIV but now it is: YELLOW DIV RED DIV I know that you're asking how to accomplish this utilising floats, but as far as I know using pure CSS this is impossible (at least without using nasty positioning, which you've said you don't want to do). As far as I know the only nice way to accomplish this with pure HTML/CSS is to utilise the new flexbox spec (a good starting point would probably be this css tricks article). When you use flexbox you can use the You can see an example of this in action here, the HTML code is similar to what you have, with an added wrapper element (I also fixed the DOCTYPE declaration): The CSS is a little different: I've also cleaned it up a little, you had duplicate code in your media query which didn't really need to be there. The only downside to this is that it currently only works on around 80% of browsers as of writing: http://caniuse.com/#search=flexbox Depending on your target market that might be OK, you could use graceful degradation so that it appears correctly in all ways except the ordering on devices that don't support flexbox fully. I guess you're also only really targeting mobile devices with reordering things, support there is good so it might work well for you. 这篇关于使用CSS更改浮动div的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
order
<！DOCTYPE html>
< div class =wrapper>
< div class =yellow>
< / div>
< div class =red>
< / div>
< / div>
.wrapper {
display：flex;
flex-flow：row wrap;
}
。黄色{
背景：黄色;
width：20％;
height：300px;
}
.red {
background：red;
width：20％;
height：300px;
}
@media屏幕和（max-width：600px）{
。yellow {
order：2;
width：100％;
}
.red {
order：1;
width：100％;
}
}
<div class="yellow"></div>
<div class="red"></div>
.yellow {
background: yellow;
width: 50%;
height: 300px;
float:left;
}
.red {
background: red;
width: 50%;
height: 300px;
float:left;
}
@media screen and (max-width:600px) {
.yellow {
background: yellow;
width: 100%;
height: 300px;
float:left;
}
.red {
background: red;
width: 100%;
height: 300px;
float:left;
}
}
order property on items to dictate which order items appear in (duh)<!DOCTYPE html>
<div class="wrapper">
<div class="yellow">
</div>
<div class="red">
</div>
</div>
.wrapper {
display: flex;
flex-flow: row wrap;
}
.yellow {
background: yellow;
width: 20%;
height: 300px;
}
.red {
background: red;
width: 20%;
height: 300px;
}
@media screen and (max-width:600px) {
.yellow {
order: 2;
width: 100%;
}
.red {
order: 1;
width: 100%;
}
}
