1

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

现在它看起来如下：

在此处输入图像描述

但是，如果其中一个图像比其他图像稍大，它会将它们推开破坏视图，如下所示（哈利波特的第一张图像太大）：

在此处输入图像描述

我怎样才能使它如此引导程序总是以相同的大小显示每个图像，而不管图像的原始大小如何，而不是像上面那样将其他图像推开？

这是显示图像的 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>
4

2 回答 2

1

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

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

于 2013-10-19T18:54:05.573 回答
0

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

.thumbnail img {
       height: 100px;
}
于 2013-10-19T18:52:36.027 回答