vertically aligning thumbnails in bootstrap css?

Question

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?

Answer 1

This is caused by the varying height of the thumbnails. clear:left / clear:both will work but the boxes will still not be the same height (which is a minor detail).

Also, if doing responsive layouts, putting a clear after every three thumbnails will mess things up.

Another solution is to ensure the height of the contents inside the thumbnail. There are many ways to do this. In this example:

1) Either have an overflow:hidden with a text-overflow: ellipsis and an optional title attribute on the span with the full text. 2) Set a height on the variant text that allows two lines (or more) of text to wrap (and even then most likely a overflow: hidden)

Basically, you need to manage the height yourself and ensure that each box will have the same height.

Answer 2

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.