Когда плавают два элемента вправо, они меняют положение

Question

Мне нужно расположить два моих элемента справа от родительского элемента, однако при использовании свойства float: right элементы переключаются между позициями.

Я смотрел на эту тему: Предотвратить обмен плавающих элементов вправо , однако добавление 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

используйте это.

.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 2

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

Answer 3

Это ожидаемое поведение, либо переключите ваши элементы в HTML, либо используйте другой метод позиционирования, кроме float.

Сначала он плавает в первом элементе, затем видит следующий, и тогда это должно бытьвсплыл снова, так что он проходит мимо первоначального.