3

我认为这应该很简单，但我无法让它工作。在 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等内容换行到下一行时，我在下一行得到一个空位置。像这样：

在此处输入图像描述

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

4

2 回答 2

5

这是由于缩略图的高度不同造成的。clear:left / clear:both 会起作用，但盒子的高度仍然不同（这是一个小细节）。

此外，如果做响应式布局，每三个缩略图后加上一个清除会搞砸。

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

1）要么有一个溢出：隐藏与文本溢出：省略号和一个可选的标题属性跨度与全文。2）在变体文本上设置一个高度，允许两行（或更多）文本换行（即使这样很可能溢出：隐藏）

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

于 2013-02-19T15:49:54.020 回答
2

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

于 2012-10-10T03:18:53.920 回答