用CSS切换块元素的顺序 [英] Switching the order of block elements with CSS

问题描述

短篇小说

假设我的HTML已经设置为：

 < div id =blockA>块A< / div> 
< div id =blockB>块B< / div> 
< div id =blockC>块C< / div> 
  

它将如下所示：

  ------------ 
 |块A | 
 ------------ 
 |块B | 
 ------------ 
 |块C | 
 ------------ 
  

现在我想切换块的顺序。我该如何使用 CSS ？

  ---------- -  
 |块C | 
 ------------ 
 |块A | 
 ------------ 
 |块B | 
 ------------ 
  

我知道hacky解决方案，例如使用 position：absolute ，但这不会保留 display：block 属性的有效使用。

长故事

当用户使用计算机查看我的网页，块按以下顺序显示：

1. 一般信息。




$ b

iPhone应用程式广告最后放置，因为它不是对计算机用户非常重要。一小部分的计算机用户会鞭打他们的手机和安装应用程序。





如果移动用户访问此网站，iPhone应用程序广告应该是页面上最重要的事情。因此，应将其移到顶部：



1. iPhone应用程式广告


2. / li>
   
3. 活动时间表。



我希望iPhone和电脑用户共享同一个HTML，有一个CSS媒体查询切换块的顺序。

  @media only screen and（max-device-width：480px） {
 #blockC {
 / *魔法订单切换* / 
} 
} 
  




解决方案

如前所述， Flexbox < a>是答案 - 特别是因为您只需要支持一个现代浏览器：Mobile Safari。





请参阅： http://jsfiddle.net/thirtydot/hLUHL/





您可以删除 -moz - 前缀属性，如果您愿意，我只是留给他们为未来的读者。





CSS：

  #blockContainer {
显示：-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： b


 < div id =blockContainer> 
< div id =blockA>块A< / div> 
< div id =blockB>块B< / div> 
< div id =blockC>块C< / div> 
< / div> 
  




Short Story

Let's say my HTML is already set in stone:

<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>

It will look like this:

------------
| Block A  |
------------
| Block B  |
------------
| Block C  |
------------

Now I want to switch the order of the blocks. How can I do that with only CSS?

------------
| Block C  |
------------
| Block A  |
------------
| Block B  |
------------

I'm aware there's hacky solutions such as using position:absolute, but this doesn't preserve the effective use of the display:block property. That is, blocks push other blocks downward when they grow in size.

Long Story

When user uses a computer to view my webpage, the blocks are displayed in this order:

1. General info.
2. Event schedule.
3. iPhone app advertisement

The iPhone app advertisement is placed last because it's not terribly important to computer users. A small percentage of computer users will whip out their phone and install the app.

If a mobile user comes to this site, the iPhone app advertisement should be the most important thing on the page. Therefore, it should be moved to the top:

1. iPhone app advertisement
2. General info.
3. Event schedule.

I would like iPhone and computer users to share the same HTML, but have a CSS media query switch the order of the blocks.

@media only screen and (max-device-width: 480px) {
   #blockC {
      /* magic order switching */
   }
}

解决方案

As has already been suggested, Flexbox is the answer - particularly because you only need to support a single modern browser: Mobile Safari.

See: http://jsfiddle.net/thirtydot/hLUHL/

You can remove the -moz- prefixed properties if you like, I just left them in for future readers.

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>

这篇关于用CSS切换块元素的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！