CSS和BS4 - 浮动离开不按预期工作

Question

我希望以3 x 3格式对齐9张牌，最多在较小的设备上查看时，它应该缩小，直到它只是9张卡的列表。

CSS：

.cardContainer{
    width: calc(54rem + 60px);
    margin: auto;
}

.card{
    width: 18rem;
    margin: 10px;
    float: left;
}

我正在使用 Bootstrap 4 ， beta 3 。没有其他风格发生过变化。

HTML：

<div class="cardContainer">

@foreach($cijfers as $cijfer)

    <div class="card">
        @if($cijfer['cijfer'] >= 8)
            <img class="card-img-top" src="check.png" alt="Card image cap">
        @else
            <img class="card-img-top" src="cross.png" alt="Card image cap">
        @endif
        <div class="card-body">
            <h5 class="card-title">{{$cijfer['vak']}}: {{$cijfer['cijfer']}}</h5>
        </div>
    </div>

@endforeach

</div>

结果如下：

我缩小了页面，所以你可以看到整个页面。

为什么会发生这种情况，我该如何解决？

Answer 1

显然你的“x”图像比勾选标记图像略高一些，因此浮动的x在第二行的复选标记下面，因为在第二个元素左边的复选标记下面仍然留有一些垂直空间。如果你看得很近，你甚至可以看到。

确保两种元素类型/图像具有完全相同的高度，这将解决您的问题。