Question

I have a drupal view which pulls out project screen shots and puts them into divs, and I was wondering if there was a clever way in CSS to align them in a row of 3 columns with a margin without styling each box individually.

First row styles easily, because i can give div-even a left and right margin, but then row 2 i need to give the div-odd a margin and the even div no margin

I have created a J fiddle Mockup of where I am at. I can style the class of the first and last div and also give a rule to odd and even, but because i don’t know how project screen shots their will be I’d prefer not to style each div box individually

http://jsfiddle.net/eGWY6/

Answer 1

You could solve this this way:

jQuery:

// Remove margin on third project screen shot
if($("#projects-wrapper div").length){
  $("#projects-wrapper div").each(function(i){
    var remainder = (i + 1) % 3; //3th change to your needs
    if(remainder === 0){
      $(this).addClass("last");
    }
  });
}

CSS:

.last {margin-right: 0;}