All geek questions in one place

Display images in a row (HTML)

So, I have this very simple HTML page. All I want is to display the images in one long line. What is the easiest way that will work in all browsers?

<html> <head> <title>My title</title> </head> <body> <div id="images"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> <img src="4.jpg"> <img src="5.jpg"> <img src="6.jpg"> </div> </body> </html>
+6
source share
4 answers

If you want #images be a single line, you can turn off word wrap .

 #images { white-space: nowrap; }

Jsfiddle

+6
source

Check out this jsbin

I think this is the easiest way:

HTML:

 <ul> <li><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> <li><img src="4.jpg"></li> <li><img src="5.jpg"></li> <li><img src="6.jpg"></li> </ul>

CSS:

 ul { white-space: nowrap; } ul, li { list-style: none; display: inline; }

Updated: Without a wrapper!

+3
source

Make the div container wide enough to handle all your images.

Let's say all your images are 300 pixels by 300 pixels ;. if you have 6 images, your div will be 1800 pixels wide

Just make the div container wide enough to fit all your images and they will not wrap. Then place each image on the left.

 <style> #images { width: 1800px; height: 300px; } #images img { float: left; } </style>

I suspect someone with much more CSS knowledge will have a better way? ...

0
source

Here is fiddle

 #images { width: 2000px; /* Increase if needed */ } #images img { width: 300px; height: 200px; float: left; }
-1
source

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

More articles:


All Articles