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

行数取决于浏览器窗口的宽度。我的窗口足够宽，所有物品都在一排。

我正在尝试一种方法来定位共享行的元素，而不存在任何实际的行。可能会有某种方式，但它会非常复杂。答案是改变标记，我很害怕。

Answer 2

在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并使该roe中的另一个i到达该高度。希望它对你有用。

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

2 个答案: