在我的示例中有两个 div，我只是希望第一个 div 在第二个 div 之后使用 css 让我们假设下面的例子
<!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 中的文本会比示例中的大。
最佳答案
以下都是纯 CSS，支持任意数量的元素，无需更改显示属性。
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);
}
关于html - 可以使用 CSS 交换 div 元素的位置吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27244545/