在不更改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/

不知道这是不可能的。任何帮助，高度赞赏。

来源

2017-03-09 Prithviraj Mitra

为了达到你想要什么，你会很遗憾不得不申请在你的div的包装。然后，你的父div将会正确地浮动，然后你的div div和div div都会向左浮动以获得你想要的订单。如果你不能直接改变HTML，jQuery可以使用吗？ – Pegues

Offcourse我可以更改html，但这样做需要花费几个小时，所以我认为调整CSS可能会更好？ –

@Pegue在这种情况下，我必须添加一个包装。我试图不去碰html。 –

.one{ 
    float:right; 
} 
.two{ 
    float: left; 
}

来源

2017-03-09 11:58:24 Aslam

你绝对需要一个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>

来源

2017-03-09 12:03:17

尝试是这样的

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

来源

2017-03-09 12:09:21

听说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>

来源

2017-03-09 12:10:09

您错过了这一点。 OP正在寻找一种不改变HTML的方式。当然，如果他改变了HTML，那么他可以通过很多方式来实现他所需要的。而flex不应该被用作第一选择。认为跨浏览器支持！ – Pegues

是的。以前使用过弹性盒，但是如果我现在使用它，现在我必须更改其他位以适应该属性。 –

在不更改html结构的情况下更改显示位置

回答

相关问题