0

我有这种类型的目录，它是用 li 和 float:left 制作的。如何从字符串中选择最高的产品标题。例如，我有 2 个产品字符串，第一行最高的标题有 2 个文本字符串，这意味着这个字符串中的所有标题都应该等于最高标题的高度，第二行最高的标题有 3文本字符串，这意味着这个字符串中的所有标题都应该等于高度为 3 的字符串，即使它有 1 个字符串

这是我的标记点击

<ul class="b-products__list">
   <li class="b-product">
    <div class="b-product__img-wrap"><a href="" class="b-product__img-link" title="товар"><img src="_mod_files/ce_images/product-1.jpg" alt="" class="b-product__img"></a></div>
    <h3 class="b-product__title"><a href="" class="b-product__link">Интеллектуальные вентиляторы вентиляторы</a></h3>
   </li>
   <li>...</li>

在此处输入图像描述

我有一个类似的脚本，但它没有按行查找

function setEqualHeight(columns)
{var tallestcolumn = 0;
columns.each(
function()
{currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{tallestcolumn = currentHeight;}
});
columns.height(tallestcolumn);
}
4

2 回答 2

0

最简单的方法是将所有行合并到容器中并更改<li>此容器中每个行的高度，如果不可能或您不知道有多少项目可以包含您的行，您可以通过 offset().top 在这里区分每一行下面是一个适用于您的页面的示例。可以重构，但主旨清晰

function getHeight(offset){
var max = 0;
var curr = 0;
$('.b-product__title').each(function(){
    curr = $(this).height();
    if($(this).offset().top == offset && curr > max){
        max = curr
    }
});
return max;
}

$('.b-product__title').each(function(){
    var offset = $(this).offset().top;
    var height = getHeight(offset);
    $(this).height(height);
});

希望能帮助到你

于 2012-12-10T10:11:26.597 回答
0

仅使用 HTML 和 CSS 就有多种选择。一方面，它是表格数据，没有什么可以反对为此使用好的 ol' <table>。

如果你不能这样做，你可以使用本文display: inline-block中讨论的方法。最终结果将与您目前的结果相同，但它会是稳定的，即，如果某些内容不匹配，则不会像这样：

错误显示：浮动

第三，如果您不能使用表格并且需要相等的高度，请像这样遍历每一行：

var lis = $('.b-products__list').find('li'),// all list elements
    lis_length = lis.length,
    row_width = 3, // the number of columns
    i, tmp_h3s, tmp_height;

// loop through all lis, but with row_width instead of `1`
for (i = 0; i < lis_length; i += row_width) {
  tmp_height = 0;

  // fetch all relevant headings in this group
  tmp_h3s = lis.slice(i, i+row_width).find('h3');
  tmp_h3s.each(function() {
    var h = $(this).height();
    if (tmp_height < h) {
      tmp_height = h;
    }
  });
  tmp_h3s.height(tmp_height);
}

（诀窍是使用拼接方法）。

于 2012-12-10T09:59:47.013 回答