Question

这是我的代码：

＆＃13;

div {
  float: right;
  border: 1px solid;
}

＆＃13;

<div> box1 </div>
<div> box2 </div>

＆＃13;

我想做的就是用box1更改box2的位置。我的意思是我想把box2作为最右边的一个。我怎么能这样做？

注意：我不想使用flex和order属性。

Answer 1

将其包裹在如下容器中：

.container{
    float:right;
}
.container div {
    float: left;
  border: 1px solid;
}

<div class="container">
<div> box1 </div>
<div> box2 </div>
</div>

Answer 2

如果您无法更改HTML，并且您愿意使用纯CSS，那么您对元素位置的控制非常有限。

如果您的盒子不超过两个并且具有固定的或（可能很小的）宽度，那么这是一个可以帮助您的小技巧。

使用CSS3 translate()来交换元素的位置：

div {
  border: 1px solid;
  float: right;
}

div:nth-child(1) {
  transform: translateX(-100%);
}

div:nth-child(2) {
  transform: translateX(100%);
}

<div> box1 </div>
<div> box2 </div>

Answer 3

change the display of div to inline-block, those box will in the same line

div{
  display: inline-block;
}

Answer 4

div {
  float: right;
  border: 1px solid;
}

<div> box2 </div>
<div> box1 </div>

否则你需要使用flex和order或javascript。 $（ '＃secondDiv'）的insertBefore（ '＃firstDiv'）;

Answer 5

尝试在Div上添加样式，但不能将类添加到css中。

 <div> box1 </div>
    <div style="float:right; right:0"> box2 </div>

如何将第二个元素设置为最右边？

5 个答案: