jQuery根据内容的高度放置按钮

Question

我的工作演示在这个link 中。标记是这样的，但仅适用于第一行。在演示链接中，我已经给出了所有代码

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

在这里您可以看到一行有 3 列，而另一行有 3 列。现在每个内容部分在页面底部都有一个添加到购物车按钮。现在我想让所有的按钮保持在我的内容的底部，它不会介意文本的长度。为此，我只是在这里使用了一些 jQuery 的东西。现在在该演示中，您可以看到它正在获取一个元素的最大高度并根据它设置 css。但我想在每一行都保留它。您可以看到第一行有 ess 内容，第二行有更多内容。因此，在第二行中，可以将按钮放在底部，并且它会占用该行的最大高度。但首先应该有类似的东西。它应该在那里检查最大高度内容，并根据该内容放置按钮。那么有人可以告诉我如何为每一行做到这一点吗？ 很抱歉告诉您，我无法更改我的标记。它将保持不变

Answer 1

在 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 达到该高度。希望它对你有用。

Answer 2

行数取决于浏览器窗口的宽度。我的窗口足够宽，所有项目都可以放在一行中。

我正在想办法只针对共享行的元素，而不存在任何实际行。可能有一些方法，但它会非常复杂。恐怕答案是更改标记。