如何保持 CSS 块相等？

Question

我正在创建一个虚拟商店，主页显示产品，这是产品详细信息中的信息数量变化，块开始变形的地方。你怎么做才能保持大小不变​​并且在任何情况下文本都会被截断？

我正在使用 MVC 5 和 Bootstrap。

                <!-- Bloque 1 -->
                @foreach (var item in Model)
                {
                    <div class="col-sm-3 col-lg-3 col-md-3">
                        <div class="thumbnail">
                            <!-- TRAE UNA IMAGEN DE CUALQUIER MANERA-->
                            <img src="@Url.Action("RenderImage", new { id = item.ProductoID})" alt="" width="150" height="320" />
                            <div class="panel panel-yellow">
                                <div class="panel-heading">
                                    <h4 class="pull-right">$@item.PrecioUnitario</h4>
                                    <h4>
                                        <a href="@Url.Action("Detalle", new { id = item.ProductoID })" class="my-class">
                                            @item.Nombre
                                        </a>
                                    </h4>
                                </div>
                            </div>

                            <div class="ratings">
                                @*<p>See more snippets like this online store item at <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>*@
                                <p>@item.DetallesCorto</p>
                            </div>

                            <div class="ratings">
                                <p class="pull-right">15 Me gusta</p>
                                <p>
                                    <span class="fa fa-fw fa-star"></span>
                                    <span class="fa fa-fw fa-star"></span>
                                    <span class="fa fa-fw fa-star"></span>
                                    <span class="fa fa-fw fa-star"></span>
                                    <span class="fa fa-fw fa-star"></span>
                                </p>
                                <p>
                                    <button type="button" class="AddLink btn btn-block btn-success btn-xs" href="#" data-id="@item.ProductoID" data-toggle="modal" data-target="#myModal">
                                        <i class="fa fa-fw fa-shopping-cart"></i> Agregar
                                    </button>
                                </p>
                            </div>

                            <div class="ratings">
                                @if (Request.IsAuthenticated && User.IsInRole("Root") || User.IsInRole("Admin"))
                                {                                        
                                    <p>
                                        <button type="button" class="anchorDetail btn btn-block btn-info btn-xs"
                                                href="javascript:void(0);" data-id="@item.ProductoID">
                                            <i class="fa fa-pencil"></i> Edicion rápida
                                        </button>
                                    </p>
                                    <p>
                                        <button type="button" class="popupDelete btn btn-block btn-danger btn-xs"
                                                href="javascript:void(0);" data-id="@item.ProductoID">
                                            <i class="fa fa-trash"></i> Eliminar
                                        </button>
                                    </p>
                                }
                            </div>
                        </div>
                    </div>
                } <!-- Cierro Forech -->
            </div>

这就是现在的样子：

Answer 1

解决方案 1 (CSS)

在红色段落和标题上设置固定高度并隐藏溢出。

.thumbnail .ratings:nth-of-type(1) p {height: 100px; overflow: hidden;}
.thumbnail h4:nth-child(2) {height: 30px; overflow: hidden;}

解决方案 2 (jQuery)

创建一个 javascript 函数，将高度设置为最高的红色段落和最高的标题。

var maxh = 0;
$('.thumbnail .ratings:nth-of-type(1) p').each(function() {
  var h = $(this).height();
  if(h > maxh) maxh = h;
});
$('.thumbnail .ratings:nth-of-type(1) p').css('height', maxh);

var maxh = 0;
$('.thumbnail h4:nth-child(2)').each(function() {
  var h = $(this).height();
  if(h > maxh) maxh = h;
});
$('.thumbnail h4:nth-child(2)').css('height', maxh);

您可能想为缩略图 div 设置一个固定高度。但这需要您将评级星和绿色按钮设置为position: absolute; bottom: [amount]px; 以正确对齐它们。我很确定这与引导浮动和这些项目的响应行为不兼容。

Answer 2

您可以遍历每个.thumbnail 项目并找到最大高度，然后将min-height 应用于与该最大高度匹配的每个元素：

$(document).ready(function() {
    var maxHeight = 0;

    $('.thumbnail').each(function() {
        var height = $(this).height();

        if(height > maxHeight) {
            maxHeight = height;
        }
    });

    $('.thumbnail').css('min-height', maxHeight);
});

您可能需要利用 setTimeout 等延迟来确保在计算高度之前已加载所有内容。

Answer 3

您应该使用 javascript/jquery 为所有框使用行或设置相同的高度。 Bootstrap 每行使用 12 个列，因此您可以修改代码以每行分隔 4 个项目。此外，如果较大的设备列宽度相同，则您只需要最小的设备列宽度。在您的情况下，仅使用 col-sm-3。

<div class="row">
    <div class="col-sm-3" ></div>
    <div class="col-sm-3" ></div>
    <div class="col-sm-3" ></div>
    <div class="col-sm-3" ></div>
</div>

Answer 4

例如，给盒子一个设定的高度：

.box {
     height: 150px;
}