CODEWITHSUNDEEP
htmlimagerow
user2757799
user2757799

Reputation: 115

Display images in a row (HTML)

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>

Upvotes: 7

Views: 103197

Answers (5)

Grigory Kislin
Grigory Kislin

Reputation: 18030

With bootstrap:

<div class="row">
   <div class="column">
      <img src="1.jpg">
   </div>
   <div class="column">
      <img src="2.jpg">
   </div>
   ...
</div>

See How To Place Images Side by Side

Upvotes: 0

Black Sheep
Black Sheep

Reputation: 6694

Look this jsbin

I think this is the simplest 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: For no wrap!

Upvotes: 6

Milan and Friends
Milan and Friends

Reputation: 5610

Here's a Fiddle

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

Upvotes: -1

Austin Brunkhorst
Austin Brunkhorst

Reputation: 21130

If you want #images to be a single row, you can turn off word wrapping.

#images {
    white-space: nowrap;
}

JSFiddle

Upvotes: 8

timgavin
timgavin

Reputation: 5166

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

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

Just make the container div wide enough to accommodate all of your images and they won't wrap. Then float each image left.

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

I'm suspecting somebody with much more CSS knowledge will have a better way?...

Upvotes: 0

Related Questions