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:\[code\]<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="http://stackoverflow.com/questions/12811403/@Url.Action("Details", "Films", new { id = film.ID })"> <img src="http://stackoverflow.com/questions/12811403/@(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>\[/code\]Generates a nice list with 3 items per row, but when the \[code\]@film.Title\[/code\] etc. content wraps to the next line I get an empty position on the next line. Like this:
I've tried display: \[code\]table-cell\[/code\], \[code\]vertical align text-bottom\[/code\] 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?