html - 将图像垂直对齐到 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;}

垂直对齐:底部；不起作用。 我需要将天气小部件图像对齐到底部。任何解决方案？ 找到附加的图像。

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

Answer 1

您可以使用 position: absolute 并使用 top/bottom/left/right 值来定位相对于其父元素的元素。 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>