Html 右浮动和css转换不能一起正确工作

我的容器中有两个div，为了使这两个div彼此相邻，我在容器中使用inline flex display。在我的一个子div（带有“wrapper”类的div）的内部，我想显示一些div并使它们保持内联，因此我在我的card div中使用float，一切正常，我还使用CSS transform translate将光标悬停在card div上。问题是，当我将光标悬停在card div上时，它必须向上移动，但首先它会向右移动一点，然后它会向上移动，并且在这个div（我将光标悬停在它上）之后的所有其他card div都会向右移动一秒钟，google chrome版本59中就有这个问题。我认为它们向右移动是因为我使用了float to right。如果我不对container div使用相对位置，当我悬停在一个div上时，其他div不会向右移动，但特定div仍会向右移动，然后向上移动。 这是我的密码：

<div class="all-results">
  <div class="filter">...</div>
  <div class="wrapper">
    <div class="card">..</div>
    <div class="card">..</div>
    <div class="card">..</div>
  </div>
</div>

---

我也必须使用float将我的card div放在一起，但我不知道在使用float时如何转换我的card div。

请扩展您在问题中包含的代码，这样如果我们运行您的代码，它实际上会重现问题。@cjl750我愿意，但此问题只发生在特定版本的google chrome中，也许你看不出这个问题，因为转换，我的类为“card”的div必须向上移动，但它首先向右移动，然后向上移动在转换属性中从

all

更改为

transform

：

transition:transform 0.2s linear。。。还有，别忘了在所有带前缀的单词中都有它。你的CSS也有一个输入错误，在规则
中有一个冒号
：
。卡片：{
为什么在
之后使用
：
。卡片：{
？
.all-results{
    width: 100%;
    display: inline-flex;
    position: relative;
    }
 .wrapper {
    margin-left: 54px;
    width: 100%;
    }
  .card{
    top: 0 !important;
    float: right;
    margin-bottom: 25px;
    margin-left: 16px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
     transition: all 0.2s linear;
    } 
  .card:hover {
      -webkit-transform: translate(0px, -3px);
      transform: translate(0px, -3px);
    }