Reputation: 153
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
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
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