jquery在div内对齐到底部答案

【问题标题】：jquery align to bottom inside divjquery在div内对齐到底部
【发布时间】：2012-02-02 22:22:58
【问题描述】：

绝对位置是不可能的。垂直对齐：底部；显示：表格单元格；会起作用，但它也需要居中。

我需要将 div 内的图像与底部对齐。图片的高度不同。

我应该只定位每个图像并计算容器高度并将剩余部分用作上边距还是有更简单的解决方案？

谢谢！

【问题讨论】：

为什么绝对定位是不可能的？

标签： jquery css

【解决方案1】：

你可以设置div的'line-height'和'text-align'属性，然后设置div内的图片的'vertical-align'属性。

即

div.images
{
    width: 720px;
    display: block;
    text-align: center;
    line-height: 720px;
}
div.images img
{
    vertical-align: bottom;
}

【讨论】：

【解决方案2】：

您不必相对于整个页面进行绝对定位。您可以将容器的定位设置为相对：

$("#my_id").parent().position(position : "relative");

然后将你的元素绝对定位在

$("#my_id").position( position : "absolute", left : ______, top : ______ )

或者在css中，

#my_container {
  position: relative;
}

#my_id {
  position: absolute;
  left: __;
  top:  __;
}

【讨论】：

【解决方案3】：

您可以将图片添加为背景并使用bottom center进行定位：

div {
    background: url("path_to_img") no-repeat bottom center;
    width: 500px;
    height: 500px;
    background-color: #e1e1e1;
}

【讨论】：

【解决方案4】：

你不需要 jquery：

<div id="wrap">
    <img src="img/image.jpg" alt="" />
</div>

#wrap { position: relative; }
#wrap img {
    position: absolute; /* display: block is implied */
    bottom: 0;
}

【讨论】：

这个网站的事情有点复杂，我很抱歉，但 css 绝对是不可能的。结束了这个 $(".exhibition .thumb").each(function() { var h = $(this).height(); var ih = $(this).children('img').height() ; $(this).children('img').css('marginTop', h-ih); });
您应该将此作为答案发布并接受它，这样问题才能被认为是完整的