Align 3 images in a div , left-centre-right, uneven margin
- by Adrian
I could find a work around for this if I wanted but it seems wrong and am trying to learn to code in a neater way.
Basically I have a div with 3 images in it, the div is 700px, and each image is 220px,
So thats 660px with two 20px gaps left and right of the centre image, and the outside images going all the way to their end of the div.
Is there a quicker way of doing this without setting up seperate ids for each image?
.contentpictureblock { float:left; }
.contentpictureblock img {
margin-right:20px;
}
<div class="contentpictureblock">
<img src="http://...">
<img src="http://...">
<img src="http://...">
</div>
Doing the above^ pushes the third image to the next line, which is understandable. I know I could always make seperate divs for each image, and adjust the margins for each one but Im just wondering is there a quicker one off overflow type command that I could apply to the above? It would mean the right margin would be on all the images but would have no effect on its positioning in the last image.
Thanks for the help.
