如何在不让第二张图片换行的情况下正确浮动两张图片？

Question

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

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;
  }

结果

Answer 2

1. 您需要从自己的帐户中删除第一个<div class="clear"></div> HTML标记为 div 是阻止级别元素，这就是第二个原因 图片从新行开始。
2. 此外，最好使用text-align: right而不是float:right。通过使用text-align属性而不是float，不再需要 clear class 。

您可以写为：

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