在不更改html结构的情况下更改显示位置
我有两个div，它们都设置为右移。现在我想在'Second Div'之前显示'First div'，但不改变html结构。在不更改html结构的情况下更改显示位置
的Html代码 -
<div class="one">
First Div
</div>
<div class="two">
Second Div
</div>
演示 - https://jsfiddle.net/squidraj/31b9ndbs/
不知道这是不可能的。任何帮助，高度赞赏。
.one{
float:right;
}
.two{
float: left;
}
你绝对需要一个wrapper。只要明白你的问题
.wrapper {
float: right;
}
.one {
float: left;
}
.two {
float: left;
}<div class="wrapper">
<div class="one">
First Div
</div>
<div class="two">
Second Div
</div>
</div>
尝试是这样的
#Container {
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="Container">
<div id="blockA">first div</div>
<div id="blockB">second div</div>
<div id="blockC">third div</div>
</div>或者你可以用order属性来完成这个像
#Container{
display:flex;
flex-flow: column;
}
#blockA{
order:4;
}
#blockB{
order:3;
}
#blockC{
order:2;
}<div id="Container">
<div id="blockA">first div</div>
<div id="blockB">second div</div>
<div id="blockC">third div</div>
</div>
听说flex-box？它会帮助你很多！ 你可以阅读更多关于order here
.one {
order: 2;
}
.two {
order: 1;
}
.container{
display:flex;
flex-direction: row-reverse
}<div class="container">
<div class="one">
First Div
</div>
<div class="two">
Second Div
</div>
</div>您错过了这一点。 OP正在寻找一种不改变HTML的方式。当然，如果他改变了HTML，那么他可以通过很多方式来实现他所需要的。而flex不应该被用作第一选择。认为跨浏览器支持！ – Pegues
是的。以前使用过弹性盒，但是如果我现在使用它，现在我必须更改其他位以适应该属性。 –
为了达到你想要什么，你会很遗憾不得不申请在你的div的包装。然后，你的父div将会正确地浮动，然后你的div div和div div都会向左浮动以获得你想要的订单。如果你不能直接改变HTML，jQuery可以使用吗？ – Pegues
Offcourse我可以更改html，但这样做需要花费几个小时，所以我认为调整CSS可能会更好？ –
@Pegue在这种情况下，我必须添加一个包装。我试图不去碰html。 –