html - 图片 "pushing"别人走了

Question

基本上我想在我的 Bootstrap 页面上列出我的图像，为每个图像提供列跨度。

现在它看起来如下:

但是，如果其中一个图像比其他图像稍大，它会将它们推离破坏 View ，如下所示(哈利波特的第一张图像太大了):

我怎样才能使 bootstrap 始终显示相同大小的每个图像，而不管图像的原始大小，而不是像上面那样将其他图像推开？

这是显示图像的 HTML:

<div class="row">
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Harry Potter and the Deathly Hallows: Part 2_2011"><img src="/Images/Movies/Harry Potter and the Deathly Hallows Part 2_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Transformers: Dark of the Moon_2011"><img src="/Images/Movies/Transformers Dark of the Moon_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/The Twilight Saga: Breaking Dawn - Part 1_2011"><img src="/Images/Movies/The Twilight Saga Breaking Dawn - Part 1_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/The Hangover Part II_2011"><img src="/Images/Movies/The Hangover Part II_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Pirates of the Caribbean: On Stranger Tides_2011"><img src="/Images/Movies/Pirates of the Caribbean On Stranger Tides_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Fast Five_2011"><img src="/Images/Movies/Fast Five_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Mission: Impossible - Ghost Protocol_2011"><img src="/Images/Movies/Mission Impossible - Ghost Protocol_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Cars 2_2011"><img src="/Images/Movies/Cars 2_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Sherlock Holmes: A Game of Shadows_2011"><img src="/Images/Movies/Sherlock Holmes A Game of Shadows_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Thor_2011"><img src="/Images/Movies/Thor_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Rise of the Planet of the Apes_2011"><img src="/Images/Movies/Rise of the Planet of the Apes_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Captain America: The First Avenger_2011"><img src="/Images/Movies/Captain America The First Avenger_2011.jpg" /></a>
        </div>
</div>

Answer 1

改为在 img 元素上使用 display: inline-block。

使用 inline-block，line 中的所有图像都将被视为一行中的单词，而不会遭受与 float 相同的命运。