Distributing images evenly & horizontally in a Div via CSS

Question

I\'m having a difficult time finding specific info for my case. I\'d like to distribute 3 image thumbnails across a 940px div in order to line up with the rest of my content

Answer 1

The downside of text-align: justify; is this that you there must be space between each two inline-block elements, otherwise those two elements will stick to each other.

you can check this behavior here: http://jsfiddle.net/JTcGZ/1552/

The new modern way to achieve this is to use flex.

#thumbs {   
    display: flex;
    justify-content: space-between // flex-start | flex-end | center | space-around;
    align-items: stretch // flex-start | flex-end | center | baseline;
}
#thumbs a {
    display: inline-block;
}

Also you can define percentage width in modern browsers:

#thumbs a {
    width: calc((100% / 3) - 10px);
}

please visit this this page for more detail on flex layout:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/