假设我的HTML已经完成了:
<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>
它看起来像这样:
------------
| Block A |
------------
| Block B |
------------
| Block C |
------------
现在我想切换块的顺序.我怎么能只用CSS做到这一点？
------------
| Block C |
------------
| Block A |
------------
| Block B |
------------
我知道有一些hacky解决方案,比如使用position:absolute,但这并不能保持对该display:block属性的有效使用.也就是说,当块体尺寸增大时,块会向下推动其他块.
当用户使用计算机查看我的网页时,这些块按以下顺序显示:
iPhone应用程序广告是最后放置的,因为它对计算机用户来说并不是非常重要.一小部分计算机用户将拨打电话并安装应用程序.
如果移动用户访问此站点,则iPhone应用程序广告应该是页面上最重要的事情.因此,它应该移到顶部:
我希望iPhone和计算机用户共享相同的HTML,但有一个CSS媒体查询切换块的顺序.
@media only screen and (max-device-width: 480px) {
#blockC {
/* magic order switching */
}
}
dev*_*ull 97
这是一个"尽可能简单"的示例,用于更改div元素的顺序(调整浏览器窗口大小时):
<!DOCTYPE html>
<html>
<head>
<title>foobar</title>
<style>
@media screen and (max-width:300px){
#parent{
display:flex;
flex-flow: column;
}
#a{order:2;}
#c{order:1;}
#b{order:3;}
}
</style>
</head>
<body>
<div id="parent">
<div id="a">one</div>
<div id="b">two</div>
<div id="c">three</div>
</div>
</body>
</html>
示例:http: //jsfiddle.net/devnull/qyroxexv/ (更改窗口宽度以查看更改div顺序的效果)
thi*_*dot 96
正如已经提出的那样,Flexbox就是答案 - 特别是因为您只需要支持一个现代浏览器:Mobile Safari.
请参阅: http ://jsfiddle.net/thirtydot/hLUHL/
-moz-如果您愿意,可以删除带前缀的属性,我只是将它们留给未来的读者.
CSS:
#blockContainer {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
#blockA {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
#blockB {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;
}HTML:
<div id="blockContainer">
<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>
</div>SW4*_*SW4 40
body{
display:flex;
flex-flow: column;
}
#blockA{
order:4;
}
#blockB{
order:3;
}
#blockC{
order:2;
}
或者,反转Y比例:
body{
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
div{
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
Ser*_*age 37
我知道这是旧的,但我找到了一个更简单的解决方案,它适用于ie10,firefox和chrome:
<div id="wrapper">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
</div>
这是css:
#wrapper {display:table;}
#one {display:table-footer-group;}
#three {display:table-header-group;}
结果如下:
"Three"
"Two"
"One"
Val*_*ean 10
没有flexbox,这个方法对我有用:
#blockA,
#blockB,
#blockC {
border: 1px solid black;
padding: 20px;
}
.reverseOrder,
#blockA,
#blockB,
#blockC {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}<div class="reverseOrder">
<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>
</div>