用 CSS 切换块元素的顺序

小开

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

假设一个块的高度是100px

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

小开

你可以改变边距: http://jsfiddle.net/zV2p4/

但是使用 position: absolute可能会更好。这不会改变 display: block，但它会使宽度自动。为了解决这个问题，将 div 设置为 width: 100%

小开

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

为什么不改变标签的顺序呢? 你的 HTML 页面不是石头做的，不是吗？

小开

最佳答案

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

参见: < a href = “ http://jsfiddle.net/Thirtydot/hLUHL/”rel = “ noReferrer”> http://jsfiddle.net/thirtydot/hluhl/

如果您愿意，您可以删除 -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>

小开

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

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

一年过去了，我对这个问题已经有了答案，因为我一直在寻找答案，我读了这个，得到了这个想法。

小开

这个怎么样。

把广告放在顶部和底部，并使用媒体查询来显示: 没有适当的。

如果广告不是太大，它不会增加太多的大小到下载，你甚至可以自定义广告发送到哪里的 iPhone/PC。

小开

我设法用 CSS display: table-*做到了这一点。我还没有测试超过3块。

小提琴

小开

下面是一个“尽可能简单”的示例，用于更改 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 顺序的效果)

小开

我知道这很老套，但我找到了一个更简单的解决方案，它可以在 ie10、火狐和 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"

我找到了给你。

小开

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

使用 Flex 、 Flex-flow和秩序:

示例1: 小提琴演奏

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

或者，逆转 Y 等级:

示例2: Demo Fiddle

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

小开

这种方法对我来说没有弹性工作箱:

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

用 CSS 切换块元素的顺序

短篇小说

说来话长

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

示例1: 小提琴演奏

示例2: Demo Fiddle