html - 如何在没有第二张图片换行的情况下正确 float 两张图片？

Question

我有两张图片我想向右浮动并保持在同一条线上。但是发生的事情是万事达卡图像在右边，而维萨卡图像在新行上 float 。有什么帮助吗？谢谢

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

可以使用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;
  }

结果