我的标记是这样的。
<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">$ 67.00</span></span></span> <ins><span class="amount">$ 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">$ 67.00</span></span></span> <ins><span class="amount">$ 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">$ 67.00</span></span></span> <ins><span class="amount">$ 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
的标记是强制性的。在他们内部我可以更改类名或标记。那么有人可以告诉我如何将按钮放在内容的底部吗?任何帮助和建议都会很明显。
我希望输出类似
答案 0 :(得分:2)
我会使用javascript来使包含项目标题的h3元素与最长的标题一样高。
小提琴:http://jsfiddle.net/633nc/
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');
先生。异形是关于你的标记是一团糟。在担心这种事情之前,你应该清理它。