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

Question

<div class = "column2_SS">
 <img class = "weather_widget" src = "images/weather.png" alt = "Smiley face">
</div>

CSS代码：

.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;}

vertical-align：bottom;不起作用。 我需要将天气小部件图像对齐到底部。有解决方案吗 找到附加的图像。

编辑： 我已将column2_SS的背景颜色设置为黑色。如果图像底部对齐，则背景颜色不应为黑色。请参见附图。图像下方有一个黑色的行，这意味着图像不是底部对齐的。

Answer 1

您可以使用position: absolute定位与其父级相关的元素，并使用上/下/左/右值。 vertical-align主要用于内联元素或表格单元格（read more on MDN）。

.column2_SS {
  background-color: #f2f7fc;
  float: right;
  height: 271px;
  width: 300px;
  background-color: black;
  margin-top: 20px;
  margin-right: 100px;
  border-radius: 7px;
  position: relative;
}

.weather_widget {
  position: absolute;
  bottom:0;
}

<div class="column2_SS">
  <img class="weather_widget" src="http://i.stack.imgur.com/iU1rX.png" alt="Smiley face">
</div>

Answer 2

嗯，网上有一个经典的修补程序，创建表格标记......

<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;
}

此外，绝对定位可以正常工作，但由于某些设备上的“跳跃”行为，我总是将其作为最后一个选项使用。