html - 在 bootstrap css 中垂直对齐缩略图？

Question

我认为这应该很简单，但我就是无法让它工作。在 ASP.NET MVC 中，我有一个这样的元素列表:

<div id="FilmListContent" class="row">
    <div class="span12">
        <ul class="thumbnails">
            @foreach (var film in Model.Films)
            {
                <li class="span4">
                    <div class="thumbnail">
                        <a href="@Url.Action("Details", "Films", new { id = film.ID })">
                            <img src="@(String.Format("../../Content/Uploads/{0}.jpg", new object[] { FileUpload.CheckImageExists(Server.MapPath("~/Content/Uploads/"), film.ID) ? "Image_Film_" + film.ID : "NoImage" }))" alt="@film.Title image" />
                            <span>
                                @film.Title (@film.Year, @film.MediaType_Name) </span></a>
                    </div>
                </li>
            }
        </ul>
    </div>
</div>

生成一个每行 3 个元素的漂亮列表，但是当 @film.Title 等内容换行到下一行时，我在下一行得到一个空位置。像这样:

我试过显示:table-cell、vertical align text-bottom 等，但我无法让它工作。目前我已经删除了缩略图上的所有 css。无论大小如何，我都可以使用什么 css 每行获得 3 个元素？还是我需要修改尺寸？

Answer 1

这是由于缩略图的高度不同造成的。 clear:left/clear:both 都可以，但盒子的高度仍然不同(这是一个小细节)。

另外，如果做响应式布局，在每三个缩略图后面放一个 clear 会把事情搞砸。

另一种解决方案是确保缩略图内内容的高度。有很多方法可以做到这一点。在这个例子中:

1) 有一个 overflow:hidden 和一个 text-overflow: ellipsis 和一个可选的 title 属性在带有全文的 span 上。2) 在允许两行(或更多)文本换行的变体文本上设置高度(即使这样很可能会溢出:隐藏)

基本上，您需要自己管理高度并确保每个盒子具有相同的高度。