Menu
So I have this very simple HTML page. All I want is to display images in one long row. What is the simplest way, that would work on 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>
755
Place Images Side by Side using CSS Float To give the spacing between the side-by-side images we will use the padding property. For example, if you want only two columns inside the row, use width: 50%; . Similarly, for three columns, use width: 33.33%; , for four columns width: 25%; and so on.
If you want #images to be a single row, you can turn off word wrapping.
#images {
white-space: nowrap;
}
JSFiddle
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
