html元素自动下对齐,使HTML元素沿底部对齐的两种方法

有时候一行的元素没有对齐，有的高的，有的低了。那么怎么才能让它们处在同一条水平线上呢？可以让它们都沿底部对齐就行了。要解决这个问题可以用CSS或者JS的方法。

一、CSS实现

一般情况下对于没有浮动的元素。

vertical-align: bottom;

如果对于有浮动的元素可以设置其line-height为当前行的高度。如下：

line-height:50px;

二、JS实现

$(function () {

if ($.browser.msie || $.browser.mozilla || $.browser.opera) {

//IE 火狐 Opera之类浏览器

$(".productli img").each(function () {

var margin = 120 - $(this).height();

$(this).css("margin-top", margin + "px");

});

}

if ($.browser.safari) {

//如果是苹果或chrome浏览器

$(".productli img").load(function () { var margin = 120 - $(this).height();

$(this).css("margin-top", margin + "px"); });

}

})