当向右浮动两个元素时，它们会切换位置

Question

我需要将我的两个元素定位在父元素的右侧，但是，当使用 float: right 属性时，它会使元素切换位置。

我看过这个帖子：Prevent Right Floated Elements from Swapping 但是，添加 display: inline-block 和 text-align: right 并没有解决问题。

这是一个

.container {
  width: 300px;
  height: 20px;
  background-color: red;
  margin: 0 auto;
}
.element1 {
  float: right;
  height: 20px;
  width: 10px;
  background-color: blue;
  color: white;
  padding: 10px;
}
.element2 {
  float: right;
  height: 20px;
  width: 10px;
  background-color: yellow;
  padding: 10px;
}

<div class="container">
  <div class="element1">1</div>
  <div class="element2">2</div>
</div>

我想要的结果是蓝色元素后跟黄色元素。

更新：

我知道这是预期的行为，第二个元素在第一个元素之后一直发送到右边，我知道改变周围的元素会解决问题，但是，只是想知道是否有是一个 CSS 解决方案。

Answer 1

这是预期的行为，请在 HTML 中切换元素，或者使用除浮动之外的其他定位方法。

它首先浮动第一个元素，然后它看到下一个元素，然后需要再次浮动，以便它移动到原始元素之上。

Answer 2

使用这个。

.container{
  width: 300px;
  height: 20px;
  background-color: red;
  margin: 0 auto;
  position:relative;
}
.element1 {
  position:absolute;
  right:0;
  height: 20px;
  width: 10px;
  background-color: blue;
}
.element2 {
  position:absolute;
  right:10px;
  height: 20px;
  width: 10px;
  background-color: yellow;
}

<div class="container">
  <div class="element1">
  </div>
  <div class="element2">
  </div>
</div>

Answer 3

.container {
  display: flex;
}

.element4 {
  margin-right: auto;
}
.element5 {
  margin-left: auto;
}

.container {
  width: 300px;
  background-color: red;
}

.element {
  height: 20px;
  width: 10px;
  padding: 10px;
}


.element1 {
  background-color: blue;
  color: white;
}
.element2 {
  background-color: yellow;
  color: black;
}

.element3 {
  background-color: green;
  color: white;
}
.element4 {
  background-color: gold;
  color: black;
}

.element5 {
  background-color: magenta;
  color: black;
}
.element6 {
  background-color: goldenrod;
  color: white;
}

<div class="container">
  <div class="element element1">1</div>
  <div class="element element2">2</div>
  <div class="element element3">3</div>
  <div class="element element4">4</div>
  <div class="element element5">5</div>
  <div class="element element6">6</div>
</div>

当向右浮动两个元素时，它们会切换位置

When float two elements right they switch positions

html

css

css-float