腳本行中最高的標題

我有這樣的類型catаlog，這是用li和浮動：左。我怎樣才能從字符串中選擇產品的最高標題。例如，我有兩串產品，第一行中最高的標題有兩串文字，這意味着這個串中的所有標題應該等於最高標題的高度，在第二行中最高的標題有三個文本字符串，也就是意味着，在這個字符串中的所有標題應該是平等的，即使它有身高3串1串腳本行中最高的標題

這裏是我的標記click

<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>

enter image description here

我有一個類似的腳本，但它看起來不行

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

來源

2012-12-10 Anna Presnyakova

你能告訴我們一些標記？另外，你是否嘗試在CSS中使用'display：inline-block'？ – David

是的，當然[鏈接]（http://business-dev4.alleanza.ru/mu/vikkar/02_psd_catalog.html），是的，我現在試過了，但問題是，邊框底應該在每行都有相同的級別。 –

請在問題中發佈相關代碼而不是鏈接，您將獲得更多關注和幫助 – David

單獨使用HTML和CSS有幾個選項。首先，它是表格數據，沒有什麼能說明使用良好的ol'<table>。

如果您不能這樣做，您可以使用display: inline-block，如this article中所述。最終的結果將是相同的，你目前所面對的一個，但它會是穩定的，即不這樣看，如果有些內容不匹配：

misguided display:float

第三，如果你能「T使用表，並且需要高度相等，經過這樣的每一行：

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); 
}

（訣竅是用splice方法）。

來源

2012-12-10 09:59:47 Boldewyn

非常感謝。它完美的作品 –

最簡單的方法是將所有行合併到容器中，並更改此容器中每個<li>的高度（如果不可能或者您不知道有多少項可以包含您的行），則可以通過偏移區分每行（）.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-10 10:11:26 IgorCh

腳本行中最高的標題

回答

相關問題