All geek questions in one place

How to make <img> tags horizontally placed in a div?

I need the images to be displayed side by side horizontally in a div. How can i do this?

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>

Link: jsFiddle

+6
source share
5 answers

To achieve this, you can also use the css display: inline-block or float: left properties.

HTML code

 <div> <img ... /> <img ... /> <img ... /> </div>

CSS code

 div img{ display: inline-block;}

or

 div img{ display: block;float: left;margin-right: 5px;}
+8
source

Under the general assumption that your code looks something like this

 <div> <img ... /> <img ... /> <img ... /> </div>

Then a simple CSS property will do the job.

 div img { display: inline; }

View your HTML part. You can use the following CSS to get them online.

 .partners img { display: inline; }
+4
source

now you can use

Your default link is http://tinkerbin.com/ob9HFOA4

Css

  img{ display: inline-block; vertical-align: top; }

live demo http://tinkerbin.com/a5BxIZrs

0
source

Instead of using inline , which robs you of a large number of controls that come with block elements or changes their vertical alignment, I would swim them:

 <html> <head> <style> div.img_holder img { float: left; } </style> </head> <body> <div class = "img_holder"> <img src="" /> <img src="" /> <img src="" /> <img src="" /> </div> </body> </html>

Floating - a kind of science in CSS; it is very important to learn, as it can give some very powerful results. For example, were there divs , not images, using inline so you didn't set their height. inline also affects the operation of margins and padding . vertical-align incompatible between browsers and, if I'm not mistaken, should not actually produce the results you are looking for, in general.

0
source

Software for everyone, so as not to spoil your other images, which you are probably going to add, do the following:

 .Wrapper img{ float: left; }

This will move all your images in the .Wrapper class to the left. If all the images on the page where these css rules are invoked are left aligned, do the following:

 .Wrapper img{ float: left; }

EDIT: Add this rule to .Wrapper

 .Wrapper{ width: 100%; }
0
source

Source: https://habr.com/ru/post/919573/

More articles:


All Articles