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

Question

I want to put the image (which is for now just a placeholder) right at the bottom of its leftColumn, how can I achieve this?

I've tried adjusting the margin for the <img> class. I thought auto on the top margin (seeing as I've set its height) would work the same way auto works for centering items. No change.

Do I need to specify the margin for the top of the image (dependant on its height), or can I do it another way?

I've also tried vertical-align: bottom; , but again no change.

Here's my 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>

My 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

The easy way is to give .rowHalfImages a position:relative, then give the image inside it a position:absolute, this will allow you to position the image at the bottom and still have other things on top if you want.

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

Answer 2

change this class like bellow :

.rowFirstPad {
    padding: 0 2% 0 2%;    
    padding-top: 100%;
}

By changing percentage you are able to set it as you want!

Answer 3

Another approach would be to use display:table if you wanted to use vertical-align. Using display: table has some side effects especially on older browsers but in your given setup it works fine.

.pageArea {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    display: table;
}
.rowHalf {
    margin: 0;
    padding: 0;
}   
.rowHalfImages {
    display:table-cell;
    vertical-align: bottom;
    padding: 0;
}
.rowFirstPad {
    padding: 0 2%;
}
.rowFirstPad img {
    display: block;
}

---

Basically, you could also position absolute and remove some of your html:

 .pageArea { max-width: 1200px; margin: 0 auto; padding: 0; } .rowHalf { position: relative; padding: 0 1% 0 51%; } .rowHalf img { position: absolute; bottom: 0; left: 1%; width: 300px; height: 300px; } 

 <div class="pageArea"> <div class="rowHalf"> <h1>DSC</h1> <img src="" alt="failed to load" style="position: absolute;border: 1px solid;left: 1%;width: 300px;height: 300px;bottom: 0;" width="" height=""> <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><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> <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> 

The flex solution is also quite nice so you see: there are lots of ways, it all depends on what you need.

Answer 4

if you used display instead float, things would be much easier (see answer about table).

Nowdays flex is quiet powerfull:( flex-fow:column + justify-content:space-between did it)

 .pageArea { max-width: 1200px; margin: 0px auto; padding: 0; display: flex; } .rowHalfImages, .rowHalf { flex: 1; margin: 1em 0; padding: 0 1em; background: lightgray; } .rowHalfImages { position: relative; display: flex; flex-flow: column; justify-content: space-between; } 

 <div class="pageArea"> <div class="rowHalfImages"> <img src="http://lorempixel.com/800/300/people" width="100%" /> <img src="http://lorempixel.com/800/300/nature" width="100%" /> </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> <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> <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> 

Note: i have removed a couple of div