Question

在我的例子中有两个div，我只是希望第一个div在使用css的第二个div后降低让我们假设下面的例子

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="div1" >

This is first div.
</div>
<div class="div2" >
    This is second div.
</div>
</body>
</html>

上面的代码给出如下输出

这是第一个div。

这是第二个div。

但我希望输出

这是第二个div。

这是第一个div。

不要使用margin top：20px，因为mycase中的文本会比示例中的更大。

Answer 1

以下两者都是纯CSS，并且不需要更改显示属性就支持任意数量的项目。

使用flex，flex-flow和order：

Example1: Demo Fiddle

    body {
        display:flex;
        flex-flow: column;
    }
    .div1 {
        order:2;
    }
    .div2 {
        order:1;
    }

或者，反转Y比例：

Example2: Demo Fiddle

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

Answer 2

你走了。只需使用一张桌子。您必须处理三个元素，一个容器和两个包含元素。

#container {
    display:table;
    width: 100%;
}
#first{
     display:table-footer-group;
 }

#second{
     display:table-header-group;
 }

<div id ="container">
    <div id = "first">This is the first div</div>
    <div id = "second">This is the second div</div>
</div>

Answer 3

正如许多海报所指出的，是的，有CSS选项。

但是如果你倾向于这样做; jQuery / Javascript也是一种解决方案。

如果您想采取这条路线，请参阅：jquery: switch Elements in DOM。

Answer 4

现在来自代码

的HTML和CSS

#example {display: table; width: 100%; }

#block-1 {display: table-footer-group; } /* Will be displayed at the bottom of the pseudo-table */
#block-2 {display: table-row-group;    } /* Will be displayed in the middle */
#block-3 {display: table-header-group; } /* Will be displayed at the top */

<div id="example">
    <div id="block-1">First</div>
    <div id="block-2">Second</div>
    <div id="block-3">Third</div>
</div>

<强>输出

第三第二第一

可以使用CSS交换div元素的位置吗？

4 个答案:

Example1: Demo Fiddle

Example2: Demo Fiddle