Html 用 CSS 切换块元素的顺序

Question

提问by JoJo

Short Story

短篇故事

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

假设我的 HTML 已经一成不变：

<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?

现在我想切换块的顺序。我怎么能只用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:blockproperty. That is, blocks push other blocks downward when they grow in size.

我知道有诸如 using 之类的hacky解决方案position:absolute，但这并不能保持该display:block属性的有效使用。也就是说，当块变大时，块会向下推其他块。

Long Story

很长的故事

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

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

General info.
Event schedule.
iPhone app advertisement

基本信息。
活动日程。
iPhone应用广告

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.

iPhone 应用程序广告放在最后，因为它对计算机用户来说并不是非常重要。一小部分计算机用户会掏出手机并安装该应用程序。

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:

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

iPhone app advertisement
General info.
Event schedule.

iPhone应用广告
基本信息。
活动日程。

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

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

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

Answer 1

采纳答案by thirtydot

As has already been suggested, Flexboxis the answer - particularly because you only need to supporta single modern browser: Mobile Safari.

正如已经提出的那样，Flexbox就是答案——特别是因为你只需要支持一个现代浏览器：Mobile Safari。

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

见：http : //jsfiddle.net/thirtydot/hLUHL/

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

-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>

Answer 2

回答by devnull

Here is a "simple as possible" example, for changing the order of div-elements (when resizing the browser window):

这是一个“尽可能简单”的示例，用于更改 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>

Example: http://jsfiddle.net/devnull/qyroxexv/(change window-width to see the effect of changing the order of the divs)

例子：http: //jsfiddle.net/devnull/qyroxexv/（改变window-width看改变div顺序的效果）

Answer 3

回答by SW4

Update: Two lightweight CSS solutions:

更新：两个轻量级 CSS 解决方案：

Using flex, flex-flowand order:

使用flex、flex-flow和order：

Example1: Demo Fiddle

示例 1：演示小提琴

    body{
        display:flex;
        flex-flow: column;
    }
    #blockA{
        order:4;
    }
    #blockB{
        order:3;
    }
    #blockC{
        order:2;
    }

Alternatively, reverse the Y scale:

或者，反转 Y 比例：

Example2: Demo Fiddle

示例 2：演示小提琴

body{
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
div{
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

Answer 4

回答by Sertage

I known this is old, but I found a easier solution and it works on ie10, firefox and chrome:

我知道这是旧的，但我找到了一个更简单的解决方案，它适用于 ie10、firefox 和 chrome：

<div id="wrapper">
  <div id="one">One</div>
  <div id="two">Two</div>
  <div id="three">Three</div>
</div>

This is the css:

这是CSS：

#wrapper {display:table;}
#one {display:table-footer-group;}
#three {display:table-header-group;}

And the result:

结果：

"Three"
"Two"
"One"

I found it here.

我在这里找到了。

Answer 5

回答by ValentinVoilean

This method worked for me without flexbox:

这种方法在没有 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>

Answer 6

回答by kspacja

HTML:

HTML：

<div id="blockC second-order">Block C</div>
<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC first-order">Block C</div>

CSS

.second-order {
     display: none;
}

@media only screen and (max-device-width: 480px) {
     .first-order: {
         display: none;
     }

     .second-order: {
         display: block;
     }
}

I think this is non-stupid solution becouse repeating content is no problem in the most of cases and in your case if it is advertisment you would repeat not a lot of content.

我认为这是非愚蠢的解决方案，因为在大多数情况下重复内容没有问题，而在您的情况下，如果是广告，您将不会重复很多内容。

I've answers on this question althought one year passed, becouse I was searching for solution, I read this and got this idea.

虽然一年过去了，但我已经回答了这个问题，因为我正在寻找解决方案，我读了这篇文章并得到了这个想法。

Answer 7

回答by fceruti

<div id="container">
    <div id="a">Block A</div>
    <div id="b">Block B</div>
    <div id="c">Block C</div>
</div>

lets say the height of a block is 100px

假设一个块的高度是 100px

#container     {position:relative; height: 300px;}
#a, #b, #c     {position:absolute; height: 100px}
#c             {top: 0px;}
#b             {top: 100px;}
#a             {top: 200px;}

Answer 8

回答by yoda

I managed to do it with CSS display: table-*. I haven't tested with more than 3 blocks though.

我设法用 CSS 做到了display: table-*。不过，我还没有测试超过 3 个块。

fiddle

小提琴

Answer 9

回答by Will

You could mess with the margins: http://jsfiddle.net/zV2p4/

你可能会弄乱边距：http: //jsfiddle.net/zV2p4/

But you would probably be better off using position: absolute. This does not change display: block, but it will make the width auto. To fix this, make the divs width: 100%

但是你可能会更好地使用position: absolute. 这不会改变display: block，但它会使宽度自动。要解决此问题，请制作 divwidth: 100%

Answer 10

回答by dpp

Possible in CSS3: http://www.w3.org/TR/css3-writing-modes/#writing-mode

在 CSS3 中可能：http: //www.w3.org/TR/css3-writing-modes/#writing-mode

Why not change the orders of the tags? Your HTML page isn't made out of stone, are they?

为什么不改变标签的顺序？你的 HTML 页面不是一成不变的，是吗？