在不改变 html 结构的情况下改变显示位置答案

【问题标题】：Changing display position without changing html structure在不改变 html 结构的情况下改变显示位置
【发布时间】：2017-07-30 09:43:42
【问题描述】：

我有两个 div，它们都设置为向右浮动。现在我希望“第一个 div”显示在“第二个 div”之前，但不更改 html 结构。

HTML代码--

<div class="one">
  First Div
</div>
<div class="two">
  Second Div
</div>

演示 -- https://jsfiddle.net/squidraj/31b9ndbs/

不确定这是否可能。非常感谢任何帮助。

【问题讨论】：

为了实现你想要的，不幸的是你必须在你的 div 周围应用一个包装器。然后，您的父 div 将向右浮动，然后您的 div 1 和 div 2 都将向左浮动，以便能够获得您想要的顺序。如果不能直接更改 HTML，可以使用 jQuery 吗？
Offcourse 我可以更改 html，但这样做还需要几个小时，所以我认为调整 css 可能会更好？
@Pegues 在这种情况下，我必须添加一个包装器。我试图不触摸 html。
还有其他原因为什么你想在你的两个 div 周围使用一个包装器，因为除非你清除浮动，否则浮动有改变内容位置的趋势。总而言之，最好的办法是应用该父包装器，然后您可以更轻松地清除浮动后的内容，您还可以根据需要定位 div。对不起，我没有更好的答案给你。
HTML float right element order 的可能重复项。和Float div's to the right in left-to-right order? 和this。和that。还有that。

标签： html css

【解决方案1】：

您肯定需要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>

【讨论】：

【解决方案2】：

试试这样的

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

【讨论】：

【解决方案3】：

听说过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 用作首选。考虑跨浏览器支持！
是的..以前使用过 flex-box，但如果我现在在当前代码中使用它，那么我必须大量更改其他位以适应该属性。

【解决方案4】：

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

【讨论】：