css - 如何保持 CSS block 相等？

Question

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

我正在使用 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

方案一(CSS)

在红色段落和标题上设置固定高度并 overflow hidden 。

.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; 以正确对齐它们。我很确定这与 Bootstrap float 和这些元素的响应行为不兼容。