我为图像，名称和描述设置了相同的高度函数，但它没有处理窗口大小调整。
我正在尝试使用此功能$(window).bind('load resize')，但到目前为止它还没有运作。
function sameHeight(c, scope) {
if (scope) {
$(scope).each(function() {
var set = $(this).find(c);
sameHeight(set);
});
} else {
var h = 0;
$(c).each(function() {
var th = $(this).height()
h = (th > h) ? th : h;
});
$(c).height(h);
}
}
// centre the image vertically within the div
function centreImg(c) {
$(c).each(function() {
var imgHeight = $(this).find('img').height();
var boxHeight = $(this).height();
var padTop = Math.floor((boxHeight - imgHeight) / 2);
$(this).find('img').css('marginTop', padTop);
});
}
window.doSameHeight = function() {
// element, scope
// replace below with elements that the script needs to affect
sameHeight('.featured-product-image', '.product-row');
sameHeight('.featured-product-name', '.product-row');
sameHeight('.featured-product-desc', '.product-row');
centreImg('.product-row .featured-product-image');
}
$(window).bind('load resize', function() {
window.doSameHeight();
});
.cf:before,.cf:after {content: ""; display: table;}
.cf:after {clear: both}
.cf {zoom: 1}
.featured-product {
width: 32.33333333%;
background-color: #fff;
border: 1px solid #ecedeb;
float: left;
margin-bottom: 14px;
text-align: center;
float: left;
box-sizing: border-box;
margin-right: 1%;
}
.featured-product-image {
text-align: center;
}
.featured-product-image img {
max-width: 100%;
}
.featured-product-name {
margin-top: 10px;
font-family: 'Open Sans', sans-serif;
font-size: 24px;
color: #1c2023;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 10px;
padding: 0 10px;
line-height: 25px;
}
.featured-product-name a {
font-family: 'Vollkorn', serif;
font-size: 24px;
color: #1c2023;
text-transform: uppercase;
font-weight: 400;
text-align: center;
text-decoration: none;
}
.featured-product-name a:hover {
text-decoration: none;
color: #3f6751;
}
.featured-product-desc {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #1b1f22;
font-weight: 400;
padding: 0 20px;
margin-bottom: 35px;
}
.featured-product-cart {
width: 182px;
background-color: #3f6751;
float: left;
}
.featured-product-price {
width: 133px;
float: left;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 600;
color: #1b1f22;
background-color: #f7f7f7;
line-height: 60px;
height: 65px;
vertical-align: middle;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-row cf">
<div class="featured-product i-1">
<div class="featured-product-image"> <a href="1-piece-premium-e-cig-kit-375-p.asp" data-ekm-badges="" data-ekm-badges-max-width="90.8" data-ekm-badges-max-height="90.8"><img itemprop="image" src="http://www.ekmpowershop18.com/ekmps/shops/jonny_lomax/images/1-piece-premium-e-cig-kit-capacity-75ml-377-p[ekm]227x227[ekm].jpg" alt="1 Piece Premium E Cig Kit" id="_EKM_SHOWDATA_PRODUCT_375" border="0"
/></a> </div>
<!--featured product image-->
<div class="featured-product-name"><a href="1-piece-premium-e-cig-kit-375-p.asp">1 Piece Premium E Cig Kit</a></div>
<!--featured product name-->
<div class="featured-product-desc">Lorem ipsum dolor sit amet, ne duo urbanitas eloquentiam consectetuer, vel et stet complectitur intellegebat, malorum alterum mei no. Ut alii reprehendunt cum, homero munere mentitum mei eu. </div>
<!--featured product desc-->
<div class="featured-product-cart-container cf">
<div class="featured-product-cart"> <a href="index.asp?function=CART&mode=ADD&productid=375"> <span class="add-to-cart"> Add to Cart</span><span class="add-cart-icon"><img src="http://www.ekmpowershop18.com/ekmps/shops/jonny_lomax/resources/design/add-to-cart.png" /></span></a> </div>
<!--featured product cart-->
<div class="featured-product-price"><span class="product-price">£54.99<span class="product-rrp">£49.99</span></span> </div>
<!--------featured product price--------->
</div>
<!--featured product cart container-->
</div>
<!--featured product-->
<div class="featured-product i-2">
<div class="featured-product-image"> <a href="3-piece-e-cig-kit-with-carry-case-3-piece-e-cig-kit-with-carry-case-367-p.asp" data-ekm-badges="" data-ekm-badges-max-width="90.8" data-ekm-badges-max-height="90.8"><img itemprop="image" src="http://www.ekmpowershop18.com/ekmps/shops/jonny_lomax/images/1-piece-premium-e-cig-kit-capacity-75ml-377-p[ekm]227x227[ekm].jpg" alt="3 Piece E Cig Kit with Carry Case 3 Piece E Cig Kit with Carry Case"
id="_EKM_SHOWDATA_PRODUCT_367" border="0" /></a> </div>
<!--featured product image-->
<div class="featured-product-name"><a href="3-piece-e-cig-kit-with-carry-case-3-piece-e-cig-kit-with-carry-case-367-p.asp">3 Piece E Cig Kit with Carry Case 3 Piece E Cig Kit with Carry Case</a></div>
<!--featured product name-->
<div class="featured-product-desc">Lorem ipsum dolor sit amet, ne duo urbanitas eloquentiam consectetuer.</div>
<!--featured product desc-->
<div class="featured-product-cart-container cf">
<div class="featured-product-cart"> <a href="index.asp?function=CART&mode=ADD&productid=367"> <span class="add-to-cart"> Add to Cart</span><span class="add-cart-icon"><img src="http://www.ekmpowershop18.com/ekmps/shops/jonny_lomax/resources/design/add-to-cart.png" /></span></a> </div>
<!--featured product cart-->
<div class="featured-product-price"><span class="product-price">£54.99<span class="product-rrp">£49.99</span></span> </div>
<!--------featured product price--------->
</div>
<!--featured product cart container-->
</div>
<!--featured product-->
<div class="featured-product i-3">
<div class="featured-product-image"> <a href="black-e-cig-case-396-p.asp" data-ekm-badges="" data-ekm-badges-max-width="90.8" data-ekm-badges-max-height="90.8"><img itemprop="image" src="http://www.ekmpowershop18.com/ekmps/shops/jonny_lomax/images/1-piece-premium-e-cig-kit-capacity-75ml-377-p[ekm]227x227[ekm].jpg" alt="Black E Cig Case" id="_EKM_SHOWDATA_PRODUCT_396" border="0"
/></a> </div>
<!--featured product image-->
<div class="featured-product-name"><a href="black-e-cig-case-396-p.asp">Black E Cig Case</a></div>
<!--featured product name-->
<div class="featured-product-desc">Lorem ipsum dolor sit amet, ne duo urbanitas eloquentiam consectetuer, vel et stet complectitur intellegebat, malorum alterum mei no. Ut alii reprehendunt cum, homero munere mentitum mei eu.</div>
<!--featured product desc-->
<div class="featured-product-cart-container cf">
<div class="featured-product-cart"> <a href="index.asp?function=CART&mode=ADD&productid=396"> <span class="add-to-cart"> Add to Cart</span><span class="add-cart-icon"><img src="http://www.ekmpowershop18.com/ekmps/shops/jonny_lomax/resources/design/add-to-cart.png" /></span></a> </div>
<!--featured product cart-->
<div class="featured-product-price"><span class="product-price">£9.99<span class="product-rrp">£14.99</span></span> </div>
<!--------featured product price--------->
</div>
<!--featured product cart container-->
</div>
<!--featured product-->
</div>