Question

我的容器中有两个div，为了保持这两个div彼此相邻，我使用inline-flex显示我的一个孩子div（div与“包装”类）的container.inside我想显示一些div并保持他们内联，因此我使用浮动为我的卡div和每一件事都没关系，我也使用CSS转换翻译在卡片div上盘旋。问题是当我在卡片div上盘旋时，它必须向上移动，但是首先它向右移动一点它上升，所有其他卡div在这个div之后（我将它悬停在它上面）将向右移动一秒钟，我在Google Chrome版本59中遇到了这个问题。我认为他们向右移动是因为我使用浮动到右边。如果我不使用容器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>

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

我必须使用浮动，同时保持我的卡片div彼此相邻，但我不知道如何在我使用浮动时转换我的卡片div。

浮右和css变换不能正常工作

0 个答案: