Html 将图像垂直对齐到div标记的底部

垂直对齐：底部对齐；不起作用。 我需要将天气小部件图像与底部对齐。有解决办法吗？ 找到附加的图像。

编辑： 我已将column2的背景色设置为黑色。如果图像底部对齐，则背景色不应为黑色。请参阅附件中的图像。图像下有一个黑色的行，这意味着图像没有底部对齐。

---

您可以使用

位置：绝对值

并使用上/下/左/右值相对于其父元素定位元素<代码>垂直对齐主要用于内联元素或表格单元格（）

.column2\u SS{
背景色：#f2f7fc；
浮动：对；
高度：271px；
宽度：300px；
背景色：黑色；
边缘顶部：20px；
右边距：100px；
边界半径：7px；
位置：相对位置；
}
.天气预报{
位置：绝对位置；
底部：0；
}

---

网络上有一个经典的修复程序，创建表外观标记

.column2_SS{
background-color: #f2f7fc;
float: right;
height: 171px;
width: 300px;
background-color: black;  /*#444444*/
margin-top: 20px;
margin-right: 100px;
border-radius: 7px;
vertical-align: bottom;}

.weather_widget{
vertical-align: bottom;}

.桌子{
显示：表格；
}
.表格单元格{
显示：表格单元格；
垂直对齐：底部对齐；
}

---

另外，绝对定位也可以，但我总是把它作为最后的选择，因为在某些设备上会出现“跳跃”行为。

您能告诉我们您当前的工作是什么样子的，以及您希望它看起来如何的方向吗？图像本身并不真实relevant@Glubus看到编辑了吗？你检查过图像的大小了吗？也许它有一小块透明的像素，或者空白，或者诸如此类的东西。也许你的div继承了底部-padding@Glubus位置：绝对位置；这里很好用。谢谢在这种情况下不使用垂直对齐。

.column2_SS{
background-color: #f2f7fc;
float: right;
height: 171px;
width: 300px;
background-color: black;  /*#444444*/
margin-top: 20px;
margin-right: 100px;
border-radius: 7px;
vertical-align: bottom;}

.weather_widget{
vertical-align: bottom;}

<div class="table">
    <div class="table-cell">
        <img src="path/to/your/img.jpg">
    </div>
</div>

.table {
    display: table;
}

.table-cell {
    display: table-cell;
    vertical-align: bottom;
}