1

動作するデモがこのリンクにあります。マークアップはこのようなものですが、最初の行のみです。デモリンクで私はすべてのコードを与えました

<div id="content">
  <ul class="products">
    <li class="product pro first">
      <a href="#">
          <span class="onsale">Sale!</span>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://web-vassets.ea.com/Assets/Resources/Image/FeaturedGame/battlefield-bad-company-2-thumb.png?cb=1340391602">
        <h3>Lorem Ipsum is simply dummy </h3>
          <span class="price"><span class="strike-through"><span class="striked-text"><span class="amount">$&nbsp;67.00</span></span></span> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
      </a>
        <a class="add_to_cart_button button product_type_simple" data-product_id="185" rel="nofollow" href="#">Add to cart</a>
    </li>

    <li class="product pro">
      <a href="#">
          <span class="onsale">Sale!</span>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://web-vassets.ea.com/Assets/Resources/Image/FeaturedGame/battlefield-bad-company-2-thumb.png?cb=1340391602">
        <h3>Battle Field</h3>
          <span class="price"><span class="strike-through"><span class="striked-text"><span class="amount">$&nbsp;67.00</span></span></span> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
      </a>
        <a class="add_to_cart_button button product_type_simple" data-product_id="185" rel="nofollow" href="#">Add to cart</a>
    </li>

    <li class="product pro last">
      <a href="#">
          <span class="onsale">Sale!</span>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://web-vassets.ea.com/Assets/Resources/Image/FeaturedGame/battlefield-bad-company-2-thumb.png?cb=1340391602">
        <h3>Battle Field</h3>
          <span class="price"><span class="strike-through"><span class="striked-text"><span class="amount">$&nbsp;67.00</span></span></span> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
      </a>
        <a class="add_to_cart_button button product_type_simple" data-product_id="185" rel="nofollow" href="#">Add to cart</a>
    </li>
</div>

ここでは、1つの行に3つの列があり、別の行に3つの列があることがわかります。これで、すべてのコンテンツセクションのページの下部に[カートに追加]ボタンが表示されます。今、私はすべてのボタンをコンテンツの下部に保持するようにしたかったので、テキストの長さが何であってもかまいません。そのために、ここではjQueryのものをいくつか使用しました。このデモでは、1つの要素の最大の高さを取得し、それに応じてcssを設定していることがわかります。しかし、私はそれをすべての行に保持したいと思います。最初の行にはessコンテンツがあり、2番目の行にはさらに多くのコンテンツがあることがわかります。したがって、2行目では、ボタンを一番下のペアに配置しても問題なく、その行の最大の高さを使用していますが、最初はそのようなものがあるはずです。そこで、最大高さの内容を確認し、それに応じてボタンを配置する必要があります。 マークアップを変更できないことをお伝えして申し訳ありません。それは同じままになります

4

2 に答える 2

0

行数は、ブラウザウィンドウの幅によって異なります。私のウィンドウは十分に広いので、すべてのアイテムが1行に収まります。

実際の行が存在しない状態で、行を共有する要素だけをターゲットにする方法を考えています。いくつかの方法があるかもしれませんが、それは非常に複雑になります。答えはマークアップを変更することです、私は恐れています。

于 2012-12-08T20:33:44.687 に答える
0

jQueryではこれを使用するだけです

(function($) {
  function normalizeHeight(items) {
    var maxHeight = 0, itemHeight;

    items.each(function() {
      itemHeight = $(this).height();
      if (itemHeight > maxHeight) {
        maxHeight = itemHeight;
      }
    }).height(maxHeight + 'px');
  }

  $(document).load(function(){
    var itemsPerRow = 3,
        items = $('ul.products li'),
        rows = items.length / itemsPerRow, 
        r, min, max;

    if (rows < 1) rows = 1;

    for(r = 0; r < rows; r++) {
      min = itemsPerRow * r,
      max = min + itemsPerRow;
      normalizeHeight(items.slice(min, max));
    }
  });
});</script>

これにより、すべてのliが同じ高さになり、行で最も高いliがチェックされ、その卵の別のiがその高さになります。それがあなたのために働くことを願っています。

于 2012-12-12T12:17:37.850 に答える