垂直对齐缩略图在bootstrap css？ [英] vertically aligning thumbnails in bootstrap css?

问题描述

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

 < div id =FilmListContentclass = > 
< div class =span12> 
< ul class =thumbnailails> 
 @foreach（Model.Films中的var film）
 {
< 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.C​​heckImageExists（Server.MapPath 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 ，垂直对齐文本底部等，但我不能让它工作。目前我已经删除所有的CSS缩略图。我可以使用什么css每行3个项目，无论大小？

解决方案

假设您使用 float：left 来布置项目，您可以在每组三个项目之后插入一个具有 clear：both 的元素，以确保每一行完全位于前一个项目之下。

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>

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:

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?

解决方案

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.

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