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で見ることができます。3 つの列が並んでいることがわかります。各列の下部には、 というボタンがありますAdd To Cart。ご覧のとおり、すべての列でコンテンツの長さが異なります。このコンテンツの長さは、ボタンを下の部分まで押しています。最後の 2 つの列はコンテンツが少ないため、ボタンはコンテンツの中央にあります。最初のコンテンツと同様に、最後の 2 つのコンテンツのボタン位置がすべてのコンテンツ 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');

エイリアン氏は、あなたのマークアップが混乱していることについて正しいです。こういうことを気にする前に、きれいにしておいたほうがいいです。

于 2012-12-08T08:05:25.650 に答える