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.Titleetc。のコンテンツが次の行に折り返されると、次の行に空の位置が表示されます。このような：

ここに画像の説明を入力してください

display：などを試しましたがtable-cell、vertical align text-bottom動作しません。現時点では、サムネイルのすべてのcssを削除しました。サイズに関係なく、行ごとに3つのアイテムを取得するためにどのCSSを使用できますか？または、サイズを修正する必要がありますか？

4

2 に答える 2

5

これは、サムネイルの高さが異なることが原因です。clear：left / clear：両方とも機能しますが、ボックスの高さは同じではありません（これは細部です）。

また、レスポンシブレイアウトを行う場合、3つのサムネイルごとにクリアを配置すると混乱します。

別の解決策は、サムネイル内のコンテンツの高さを確保することです。これを行うには多くの方法があります。この例では：

1）overflow：hidden with the text-overflow：ellipsisとオプションのtitle属性をスパンにフルテキストで含める。2）2行（またはそれ以上）のテキストを折り返すことができるように、バリアントテキストに高さを設定します（その場合でも、オーバーフローの可能性が高い：非表示）

基本的に、高さを自分で管理し、各ボックスの高さが同じになるようにする必要があります。

于 2013-02-19T15:49:54.020 に答える