使用 CSS 更改浮动 div 的顺序 [英] Change order of floated divs with CSS
问题描述
我想更改某个像素大小的浮动 div 的顺序.
在默认状态下，它们都有 50% 的宽度并且它们彼此相邻.
低于 600 像素的屏幕尺寸(或 w/e 无关紧要)我希望第二个 div(红色)浮动在第一个 div(黄色)之上.
仅使用 CSS 的解决方案怎么可能做到这一点?
HTML
<div class="red"></div>
CSS
.yellow {背景:黄色；宽度:50%；高度:300px；向左飘浮;}.红色的 {背景:红色；宽度:50%；高度:300px；向左飘浮;}@media 屏幕和 (max-width:600px) {.黄色的 {背景:黄色；宽度:100%；高度:300px；向左飘浮;}.红色的 {背景:红色；宽度:100%；高度:300px；向左飘浮;}}我想要的解决方案是:
红色分区
黄色 DIV
但现在是:
黄色 DIV
红色分区
我知道你在问如何使用浮动来实现这一点，但据我所知使用纯 CSS 这是不可能的(至少不使用讨厌的定位，你说过你不想这样做).
据我所知，使用纯 HTML/CSS 实现这一目标的唯一好方法是利用新的 flexbox 规范(一个好的起点可能是这篇css技巧文章).
当您使用 flexbox 时，您可以在项目上使用 order 属性来指示哪些订单项目出现在 (duh) 中
您可以在此处看到此示例，HTML 代码与您拥有的代码类似，但添加了包装元素(我还修复了 DOCTYPE 声明):
<div class="wrapper"><div class="黄色"><div class="红色">
CSS 有点不同:
.wrapper {显示:弹性；flex-flow:行包装；}.黄色的 {背景:黄色；宽度:20%；高度:300px；}.红色的 {背景:红色；宽度:20%；高度:300px；}@media 屏幕和 (max-width:600px) {.黄色的 {订单:2；宽度:100%；}.红色的 {订单:1；宽度:100%；}}我也对其进行了一些清理，您的媒体查询中有重复的代码，这些代码实际上并不需要存在.
唯一的缺点是它目前只能在大约 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
<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 screen and (max-width:600px) {
.yellow {
background: yellow;
width: 100%;
height: 300px;
float:left;
}
.red {
background: red;
width: 100%;
height: 300px;
float:left;
}
}
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 order property on items to dictate which order items appear in (duh)
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):
<!DOCTYPE html>
<div class="wrapper">
<div class="yellow">
</div>
<div class="red">
</div>
</div>
The CSS is a little different:
.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%;
}
}
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屋！
