July 3, 2012
How to make the <img> tags line up horizontally in the div?
Question by justcode
I need to make the images show up side by side horizontally in the div. How can I do that?
HTML:
<div class="Wrapper">
<img src="/wp-content/uploads/2012/07/TFT.png" alt="Smiley face" height="90" width="95" />
<img src="/wp-content/uploads/2012/07/Ltyt.png" alt="Smiley face" height="90" width="95" />
<img src="/wp-content/uploads/2012/07/artspng" alt="Smiley face" height="90" width="95" />
</div>
Reference: jsFiddle
Answer by Ravi
You could also use css properties display:inline-block or float : left to achieve this.
HTML Code
<div>
<img ... />
<img ... />
<img ... />
</div>
CSS Code
div img{ display: inline-block;}
or
div img{ display: block;float: left;margin-right: 5px;}
Answer by Starx
On the general assumption of your code being something like this
<div>
<img ... />
<img ... />
<img ... />
</div>
Then, a simple CSS property will get the job done.
div img { display: inline; }
On seeing your HTML portion. You can use the following CSS to get them online.
.partners img { display: inline; }
