图像“推”其他人

Question

基本上我想在我的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

请改为使用display: inline-block元素{/ 1}}。

使用img，行中的所有图像都将被视为一行中的单词，并且不会遭遇与浮点数相同的命运。

Answer 2

只需为图像创建一个类并明确设置高度，例如

.thumbnail img {
       height: 100px;
}