Question

我有两个div，它们都设置为向右浮动。现在我想要＆＃39; First div＆＃39;在＆＃39; Second Div＆＃39;之前显示但是没有改变html结构。

Html代码 -

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

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

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

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

Answer 2

尝试这样的事情

＆＃13;

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

＆＃13;

<div id="Container">
    <div id="blockA">first div</div>
    <div id="blockB">second div</div>
    <div id="blockC">third div</div>
</div>

＆＃13;

或者您可以使用order属性

来执行此操作

＆＃13;

#Container{
  display:flex;
  flex-flow: column;
}
#blockA{
  order:4;
}
#blockB{
  order:3;
}
#blockC{
  order:2;
}

＆＃13;

<div id="Container">
    <div id="blockA">first div</div>
    <div id="blockB">second div</div>
    <div id="blockC">third div</div>
</div>

＆＃13;

Answer 3

听说flex-box？它会帮助你很多！您可以阅读有关order here

的更多信息

＆＃13;

.one {
  order: 2;
}

.two {
  order: 1;
}
.container{
  display:flex;
  flex-direction: row-reverse
}

＆＃13;

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

＆＃13;

Answer 4

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

更改显示位置而不更改html结构

4 个答案: