1

I have code that looks like this:

<div class="row">
  <div>
    <img src="img1.jpg" />
  </div>
  <div>
    <img src="img2.jpg" />
  </div>
  <div>
    <img src="img3.jpg" />
  </div>
</div>

I want to align blocks by their bottoms. How can i do that?

UPDATE: Thank you guys for your answers, I don't know why, but they didn't help me. So here is real html code in js fiddle: http://jsfiddle.net/rZvqK/

Dmitrii Mikhailov
  • 5,053
  • 7
  • 43
  • 69

4 Answers4

1

from my original answer (in the comment),

put this in your CSS

.row > div
{
    display: inline-block;
    vertical-align: bottom
}

notice: the > selector dont play well with IE7, so if you need to consider this browser go for .row div as the selector. but if you don't care about IE7, use '>' because its more spesific.

check out this fiddle:

Update: Updated fiddle

  1. use .row > div in the selctor, because your markup have other nested div's in the .row and you don't want to affect them. with the > tou affect only the direct childs of the .row

  2. you're floating your rows, and that is causing them to not align. remove the floating (now you can also remove the clear div at the end of your markup)

  3. when dropping the float, you'll notice that the rows dont fit in the same line, that because of extra spacing between the rows caused by the new line between the rows in the markup. the easiest fix for that is as I did (by removing the space between the markup), see more here How do I remove extra margin space generated by inline blocks?

  4. finally, they are not rows, but columns.

Community
  • 1
  • 1
avrahamcool
  • 13,888
  • 5
  • 47
  • 58
0

You can use this css

.row div{
    display:inline-block;
    vertical-align:bottom;
}
Love Trivedi
  • 3,899
  • 3
  • 20
  • 26
0

You can use like this:

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

But if I understand properly your question you should add an extra markup like <br /> but better to use clearfix techniques here after div containing img tag.

demo

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
0

Here is your solution: jsFiddle - with code edit

.spacer a{        
    position: relative;
    display: block;
    width: 150px;
    height: 200px;
}
.spacer img{
    margin-top: 6px;
    max-width: 100%;
    height: auto;
    position: absolute;
    bottom: 0px;
 }

The idea is to set the parent block to position: relative and the child block to position: absolute; bottom:0px;

Note that because in your case the parent tag is an anchor i also added display:block and to make sure all blocks conform to the same size i also added dimensions.

null
  • 1,178
  • 8
  • 15