Как переместить два изображения прямо без перехода второго на новую строку?

Question

У меня есть два изображения, которые я хочу плавать и держать на одной линии.но то, что происходит, - изображение mastercard справа, в то время как изображение карты visa перемещается прямо на новой строке.Любая помощь?Спасибо

HTML:

  <label>
      <img src="{% static 'img/Mastercard.png' %}" style="float:right">
  </label>
  <div class="clear"></div>
  <label>
      <img src="{% static 'img/Visa.png' %}" style="float:right">
  </label>
  <div class="clear"></div>

CSS:

.clear {
clear: both;
}

Answer 1

1. Вам необходимо удалить первый <div class="clear"></div> из вашей разметки HTML как div , равный уровню блока , поэтому ваше второе изображение начинается с новой строки.
2. Также лучше использовать text-align: right вместо float:right.При использовании свойства text-align вместо float очистить класс больше не потребуется.

Вы можете написать как:

<div style="text-align: right">
    <img src="{% static 'img/Mastercard.png' %}">
    <img src="{% static 'img/Visa.png' %}">
</div>

Answer 2

Вы можете использовать flexbox для реализации.

html

<div id="container">
  <label> <img src="./react-logo.png" /> </label>
  <label> <img src="./pic_angular.jpg" /> </label>
</div>

css

  img {
    max-width: 100%;
    object-fit: cover;
  }

  #container {
    display: flex;
    justify-content: flex-end;
  }

result