How to wrap images on the same line?

I want images to be placed after each other even if it is already greater than container width For example:

<div style = " border: 1px solid black; width: 300px; height: 400px;overflow-x: auto;"  >
<img style = " display: block; float:left; width: 400px; height: 100px;" src="images.jpg">
<img style = " display: block ; float:left;width: 400px; height: 100px;" src="images.jpg">
</div>

And this is what it looks like enter image description here

How can I make images go one by one even if first one is already outside the width of the container?

Upvotes: 1

Views: 706

Answers (1)

Spectric
Spectric

Reputation: 31987

display:flex

div {
  display: flex;
}

img {
  display: block;
  float: left;
  width: 400px;
  height: 100px;
}
<body>
  <br>
  <div style=" border: 1px solid black; width: 300px; height: 400px;overflow-x: auto;">
    <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
    <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
  </div>
</body>

I also recommend using classes instead of inline styles multiple times.

Upvotes: 3

Related Questions