垂直排列在CSS引导缩略图？ [英] vertically aligning thumbnails in bootstrap css?

问题描述

我想这应该是很简单，但我不能得到它的工作。在ASP.NET MVC我有一个项目列表如下：

I think this should be quite simple, but I just can't get it to work. In ASP.NET MVC I have a list of items like this:

<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 等内容换到下一行我得到下一行的空位置。像这样的：

Generates a nice list with 3 items per row, but when the @film.Title etc. content wraps to the next line I get an empty position on the next line. Like this:

我试过显示：表细胞，垂直对齐文本底部等，但我可以'弄不明白工作。此刻我已删除缩略图上的所有的CSS。什么的CSS我可以用它来获取每行3项事无大小？或者我需要修复的大小？

I've tried display: table-cell, vertical align text-bottom etc, but I can't get it to work. At the moment I have removed all css on the thumbnails. What css can I use to get 3 items per row no matter the size? Or do I need to fix the size?

推荐答案

假设你正在使用浮动：左来铺陈的项目，你可以插入一个以<元素code>明确：既每组三个项目之后，以确保每个线完全低于previous一个位于

Assuming you are using float: left to lay out the items, you can insert an element with clear: both after each set of three items to ensure that each line is positioned completely below the previous one.

这篇关于垂直排列在CSS引导缩略图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！