小编典典

使用CSS切换块元素的顺序

html

假设我的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属性的有效使用。也就是说,块随着大小的增加而将其他块向下推。

很长的故事

当用户使用计算机查看我的网页时,这些块将按以下顺序显示:

  1. 基本信息。
  2. 活动时间表。
  3. iPhone应用广告

iPhone应用程序广告排在最后,因为它对计算机用户而言并不十分重要。一小部分计算机用户会拨出电话并安装该应用程序。

如果移动用户访问此网站,则iPhone应用广告应该是页面上最重要的内容。因此,应将其移至顶部:

  1. iPhone应用广告
  2. 基本信息。
  3. 活动时间表。

我希望iPhone和计算机用户共享相同的HTML,但是让CSS媒体查询切换块的顺序。

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

阅读 414

收藏
2020-05-10

共1个答案

小编典典

正如已经建议的那样Flexbox是答案-尤其是因为您只需要支持一个现代的浏览器:Mobile Safari。

您可以根据需要删除带-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>
2020-05-10