html - 可以通过 css 交换两个元素吗？

Question

我需要使用 css 交换两个元素。我的 html 在这里:

<div class="container">
    <div class="Div2">
        <img src="Div2.jpg">
    </div>
    <div class="Div1">
        <img src="Div1.jpg">
    </div>
</div>

我的 CSS 在这里:

.container{width:50%; margin:auto;}
.div2{float:left;width:100%;}
.div1{float:left;width:100%;}

有没有办法只用css把div1放在div2的位置而不改变html？

Answer 1

向右浮动.div2，向左浮动.div1:

.div2{ float:right; }
.div1{ float:left; }

如果您试图将它们并排堆叠，您还必须删除 width: 100%;。

此外，类是区分大小写的。在您的示例代码中，您的 div 类是 .Div1 和 .Div2，确保使用所有小写类来匹配定义:

<div class="container">
    <div class="div2">
        <img src="Div2.jpg">
    </div>
    <div class="div1">
        <img src="Div1.jpg">
    </div>
</div>

示例: http://jsfiddle.net/dph8t/