0

我有这样的标记。

  <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 text of the printing and typesetting industry. Lorem</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 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>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 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>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>
  </ul>

可以在此处查看现场演示示例http://tinkerbin.com/7dnpFPL3。您可以在一行中看到三列。在每一列的底部都有一个名为 的按钮Add To Cart。现在，正如您在每一列中看到的那样，内容的长度不同。此内容长度将按钮推到底部。最后两列的内容较少，这就是按钮位于内容中间的原因。现在我希望像第一个内容一样，最后两个内容的按钮位置应该位于每个内容 div 的底部。无论内容的长度如何，它都不会影响按钮的位置。该按钮应始终位于内容的底部。我不能给出任何固定的内容高度。因为每列内容的长度可能非常长。我无法将标记更改为使用表格而不是ul and li. 的标记ul and li是强制​​性的。在它们内部，我可以更改类名或标记。那么有人可以告诉我如何将按钮放在内容的底部吗？任何帮助和建议都将不胜感激。

我想要这样的输出 在此处输入图像描述

4

1 回答 1

2

我会使用 javascript 使包含项目标题的 h3 元素都与最长的标题一样高。

小提琴：http: //jsfiddle.net/633nc/

Javascript

    function makeElementsSameHeight(element){
        $element = $(element);
        // check if element exists
        if (!$element.length){
            return false;
        }           
        // get number of elements
        numberElements = $element.length;
        lengthArray = [];
        for (i=0;i<numberElements;i++){
            //put height of each element into an array
            lengthArray.push( $element.eq(i).height() );
        }
        
        // calculate maximum height
        largestHeight = Math.max.apply(Math, lengthArray);
        // apply maximum height to all elements
        $element.css('min-height',largestHeight + 'px');;
    }
    
    makeElementsSameHeight('.product h3');

Alien 先生说你的标记是一团糟是对的。你应该在担心这种事情之前把它清理干净。

于 2012-12-08T08:05:25.650 回答