Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > One of the solutions to align images at the bottom in the browser_jquery

One of the solutions to align images at the bottom in the browser_jquery

WBOY

Release： 2016-05-16 17:58:59

Original

1616 people have browsed it

style="vertical-align:bottom;" didn't work. I searched online and said that it needs to be implemented using js. I found a code, but the test was unsuccessful. The main reason was that the code was too much and too messy to be in the mood to test.
So just write it yourself.

Copy code The code is as follows:

 
$(function () { 
if ($ .browser.msie || $.browser.mozilla || $.browser.opera) {//IE Firefox Opera and other browsers 
$(".productli img").each(function () { 
 var margin = 120 - $(this).height(); 
$(this).css("margin-top", margin "px"); 
}); 
} 
if ($.browser.safari) {//If it is an Apple or Chrome browser 
$(".productli img").load(function () { 
var margin = 120 - $(this).height( ); 
$(this).css("margin-top", margin "px"); 
}); 
} 
}) 

After testing, the following browsers pass
IE6, IE8, Chrome, Opear, FireFox, QQ Browser, 360, Maxthon, Apple
Baidu and other IE core ones have not been tested and will definitely work.
Looking forward to more streamlined code.

Related labels：

底部对齐

source：php.cn

Previous article：Code to receive the value passed by get using Javascript_javascript skills Next article：JQUERY1.6 usage method four: detect browser_jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn