ashabee ashabee - 1 year ago 52
HTML Question

wanting images to sit next to each other, not below

I'm trying to make the images on my tumblr site sit next to each other, instead of above each other. I've made various attempts at following suggestions I've found on forums, but can't get it to work, so asking my first forum question.

This is the page I'm working on: http://dieinsel.tumblr.com/stories

I have more images to add (and each image is a link). I'd like the images to tile next to each other (with some space in between).

I've deleted all my attempts at changing the HTML, so it's back to the original:

<p><a href="http:blah"><img src="https:blah.jpg" /></a>&nbsp; &nbsp; &nbsp;<a href="http:blah2"><img src="https:blah2.jpg" /></a>&nbsp; &nbsp; &nbsp;<a href="http:blah3" style="line-height: 1.4;"><img src="https:blah3.jpg" /></a></p>

Answer Source

You have a CSS like :

.caption img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 30px auto 30px auto;
    border-radius: 2px;
}

You have to change it to :

.caption img {
    display: inline-block; // Here change block to inline-block
    max-width: 100%;
    height: auto;
    margin: 30px auto 30px auto;
    border-radius: 2px;
}

Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download