假设我的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 | ------------
我知道有一些骇人听闻的解决方案,例如using position:absolute,但这不能保留该display:block属性的有效使用。也就是说,块随着大小的增加而将其他块向下推。
position:absolute
display:block
很长的故事
当用户使用计算机查看我的网页时,这些块将按以下顺序显示:
iPhone应用程序广告排在最后,因为它对计算机用户而言并不十分重要。一小部分计算机用户会拨出电话并安装该应用程序。
如果移动用户访问此网站,则iPhone应用广告应该是页面上最重要的内容。因此,应将其移至顶部:
我希望iPhone和计算机用户共享相同的HTML,但是让CSS媒体查询切换块的顺序。
@media only screen and (max-device-width: 480px) { #blockC { /* magic order switching */ } }
正如已经建议的那样Flexbox是答案-尤其是因为您只需要支持一个现代的浏览器:Mobile Safari。
您可以根据需要删除带-moz-前缀的属性,我留给了以后的读者。
-moz-
#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; } <div id="blockContainer"> <div id="blockA">Block A</div> <div id="blockB">Block B</div> <div id="blockC">Block C</div> </div>