Question

问题背景：

我的MVC应用中有一个简单的页面，它会显示Panels的列表。

问题：

小组包括有关我显示的产品的信息，包括产品标题和图像。我已将图像设置为最大105px。如果产品的标题很长，它就会突破到第二行，这意味着它会向下推动下一行面板，留下行中的空白。请参阅下图以获得解释：

如何设置标记，使面板始终保持相同的高度，无论图像或标题的大小如何？我想松开行中的空白。

MarkUp：

这是以下我正在使用的MarkUp。请注意创建Panel列表的foreach循环：

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@model List<ShopComparisonEngine.Models.ViewResponseRoot>

<!DOCTYPE html>
<html>
<head>
    <title>
        Comparison Engine
    </title>
</head>
<body>
<div class="container">

    @foreach (var displayItem in (List<ShopComparisonEngine.Models.ViewResponseRoot>)Model)
    {
        foreach (var item in displayItem.DisplayItems)
        {

            <div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title text-center"><b>@item.Title</b></h3>
                    </div>
                    <div class="panel-body">
                        <a href="@item.url"><img src="@item.Image" class="picHeight img-rounded img-responsive center-block" /></a>
                        <h4 class="text-center">£@item.Price</h4>
                        <h4 class="text-center"><a href="@item.url" class="btn btn-success">See More</a></h4>
                        <h4 class="text-center">@item.Origin</h4>
                    </div>
                </div>
            </div>
        }
    }
</div>

如何处理不同的面板高度导致连续出现间隙？

0 个答案: