0

私はli と float:left で作られたそのようなタイプのカタログを持っています。文字列から製品の最も高いタイトルを選択するにはどうすればよいですか? たとえば、製品の 2 つの文字列があり、最初の行の最も高いタイトルには 2 つのテキスト文字列があります。つまり、この文字列のすべてのタイトルは、最も高いタイトルの高さと等しくなければならず、2 行目の最も高いタイトルの高さは 3 です。テキストの文字列、つまり、この文字列のすべてのタイトルは、文字列が 1 つであっても高さ 3 の文字列と等しくなければならないことを意味します

これが私のマークアップのクリックです

<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

HTMLとCSSだけでいくつかのオプションがあります。一つには、それは表形式のデータであり、これに古き良きものを使用することに反対するものは何もありません<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 に答える
0

最も簡単な方法は、すべての行をコンテナに結合し<li>、このコンテナ内の各行の高さを変更することです。それが不可能な場合、または行を含むアイテムの数がわからない場合は、offset().top here で各行を区別できます。あなたのページで動作する以下の例です。リファクタリングできますが、主なアイデアは明確です

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 に答える