html - 如何在元素底部对齐图像？

Question

我想将图像(目前只是一个占位符)放在其左列的底部，我该如何实现？

我试过调整 <img> 的边距类(class)。我以为auto在上边距(看到我已经设置了它的高度)将以与 auto 用于居中元素的方式相同的方式工作。不用找了。

我需要指定 margin 吗？对于图像的顶部(取决于它的高度)，或者我可以用其他方式做吗？

我也试过 vertical-align: bottom; , 但同样没有变化。

这是我的 HTML:

<div class="pageArea">
  <div class="rowHalfImages">
    <div class="rowFirstPad"> <img width="100%" height="300px" /> </div>
  </div>
  <div class="rowHalf">
    <div class="rowSecondPad">
      <h1>DSC</h1>
      <p class="introPara">Hello.</p>
      <p>Lorem upsum diosks d amei sfor. More dojrn nbutforge absirns sie, for the siemssmsie a s. During which time the enovleo, will apela, hibt bdeue nf o the dirj, sisnr rufndf. Soerm iejrj ssleoe, orf risms, prod, ddvs sos anmd. Recent doejd aba dor the ssie dimjsiuend duekopmnvuer dmuie doe. Maolske, nfi sikeie. Adie dows. Osleifspd fi tje sos, gjsdijchfu.</p>
      <p>Lorem upsum diosks d amei sfor. More dojrn nbutforge absirns sie, for the siemssmsie a s. During which time the enovleo, will apela, hibt bdeue nf o the dirj, sisnr rufndf. Soerm iejrj ssleoe, orf risms, prod, ddvs sos anmd. Recent doejd aba dor the ssie dimjsiuend duekopmnvuer dmuie doe. Maolske, nfi sikeie. Adie dows. Osleifspd fi tje sos, gjsdijchfu.</p>
    </div>
  </div>
  <div class="clearBoth"></div>
</div>

我的 CSS:

.pageArea {
    max-width: 1200px;
    margin: 0px auto;
    padding: 0;
}
.rowHalf {
    width: 50%;
    float: right;
    margin: 0;
    padding: 0;
}   
.rowHalfImages {
    width: 50%;
    float: left;
    height: 100%;
    padding: 0;
}
.rowFirstPad {
    padding: 0 2% 0 2%;
}
.rowFirstPad img {
    vertical-align: bottom;
    margin: auto 0;
}
.rowSecondPad {
    padding: 0 0 0 2%;
}

Answer 1

最简单的方法是给 .rowHalfImages 一个 position:relative，然后给它里面的图像一个 position:absolute，这样你就可以把图像放在底部，如果你想的话，还有其他东西在上面。

.rowHalfImages{
    position:relative;
    height:auto;
    /* other style you want */
}
.rowHalfImages img {
    position:absolute;
    left:10px;
    bottom:10px;`
    /* other style you want */
}