我使用MaterialiseCSS框架创建了一个视频库。这就是它的下图：Gallery
但是我注意到，如果我应该从鸟图像中更改第4列中卡片内的图像，则会产生间隙。见下图： Gallery with gap
可能导致这种情况的原因是什么？卡的所有html内容都是重复的。我只改变了一些图像
HTML：
<div class="col s3">
<div class="card z-depth-4">
<div class="card-image">
<img src="img/img1.jpg">
<a class="btn-floating halfway-fab waves-effect waves-light cyan activator"><i class="material-icons">more_horiz</i></a>
</div>
<div class="card-content black">
<span class="center-align video-title card-title white-text"> How to watch this movie</span>
<div class="col s2">
</div>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">HOW TO DO THIS<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col s3">
<div class="card z-depth-4">
<div class="card-image">
<img src="img/img2.jpg">
<a class="btn-floating halfway-fab waves-effect waves-light cyan activator"><i class="material-icons">more_horiz</i></a>
</div>
<div class="card-content black">
<span class="center-align video-title card-title white-text"> How to watch this movie</span>
<div class="col s2">
</div>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">HOW TO DO THIS<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col s3">
<div class="card z-depth-4">
<div class="card-image">
<img src="img/img3.jpg">
<a class="btn-floating halfway-fab waves-effect waves-light cyan activator"><i class="material-icons">more_horiz</i></a>
</div>
<div class="card-content black">
<span class="center-align video-title card-title white-text"> How to watch this movie</span>
<div class="col s2">
</div>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">HOW TO DO THIS<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col s3">
<div class="card z-depth-4">
<div class="card-image">
<img src="img/img1.jpg">
<a class="btn-floating halfway-fab waves-effect waves-light cyan activator"><i class="material-icons">more_horiz</i></a>
</div>
<div class="card-content black">
<span class="center-align video-title card-title white-text"> How to watch this movie</span>
<div class="col s2">
</div>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">HOW TO DO THIS<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col s3">
<div class="card z-depth-4">
<div class="card-image">
<img src="img/img2.jpg">
<a class="btn-floating halfway-fab waves-effect waves-light cyan activator"><i class="material-icons">more_horiz</i></a>
</div>
<div class="card-content black">
<span class="center-align video-title card-title white-text"> How to watch this movie</span>
<div class="col s2">
</div>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">HOW TO DO THIS<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col s3">
<div class="card z-depth-4">
<div class="card-image">
<img src="img/img1.jpg">
<a class="btn-floating halfway-fab waves-effect waves-light cyan activator"><i class="material-icons">more_horiz</i></a>
</div>
<div class="card-content black">
<span class="center-align video-title card-title white-text"> How to watch this movie</span>
<div class="col s2">
</div>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">HOW TO DO THIS<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col s3">
<div class="card z-depth-4">
<div class="card-image">
<img src="img/img2.jpg">
<a class="btn-floating halfway-fab waves-effect waves-light cyan activator"><i class="material-icons">more_horiz</i></a>
</div>
<div class="card-content black">
<span class="center-align video-title card-title white-text"> How to watch this movie</span>
<div class="col s2">
</div>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">HOW TO DO THIS<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col s3">
<div class="card z-depth-4">
<div class="card-image">
<img src="img/img1.jpg">
<a class="btn-floating halfway-fab waves-effect waves-light cyan activator"><i class="material-icons">more_horiz</i></a>
</div>
<div class="card-content black">
<span class="center-align video-title card-title white-text"> HOW TO WATCH THIS MOVIE3</span>
<div class="col s2">
</div>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">HOW TO DO THIS<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col s3">
<div class="card z-depth-4">
<div class="card-image">
<img src="img/img4.jpg">
<a class="btn-floating halfway-fab waves-effect waves-light cyan activator"><i class="material-icons">more_horiz</i></a>
</div>
<div class="card-content black">
<span class="center-align video-title card-title white-text"> How to watch this movie</span>
<div class="col s2">
</div>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">HOW TO DO THIS<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col s3">
<div class="card z-depth-4">
<div class="card-image">
<img src="img/img2.jpg">
<a class="btn-floating halfway-fab waves-effect waves-light cyan activator"><i class="material-icons">more_horiz</i></a>
</div>
<div class="card-content black">
<span class="center-align video-title card-title white-text"> How to watch this movie</span>
<div class="col s2">
</div>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">HOW TO DO THIS<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
</div>