CSS: how align to top nth row of div? -


demo: http://jsfiddle.net/5qdzr/

i want first div containing photo of second row "aligned top" first div containing photo of first row, , third div containing photo of second row must "aligned top" third div containing photo of first row.

aligned top of course 5px margin set in css (#gallery div.placeholder)

html:

<div id="gallery"> <div class="placeholder"> <a href="#" title="" data-gallery="">     <img src="http://lorempixel.com/400/400/" /> </a> [... repeat on] </div> 

css:

#gallery{background-color:red;} #gallery img{-webkit-transition: opacity 0.4s;-moz-transition: opacity 0.4s;-ms-transition: opacity 0.4s;transition: opacity 0.4s;width:100%;} #gallery div.placeholder{display:inline-block;vertical-align:top;width:30%;margin:5px;} 

pre: enter image description here

i need this: enter image description here

you float:left placeholder.

but won't give exact result want.

i think need use bit of javascript absolutely position elements.

or adjust margins (negative margin-tops)


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -