-1

I have the following html code:

<style>
img {
    width:33.3333333%;
    float:left;
}
</style>

<img src="https://via.placeholder.com/500/FF0000?text=1">
<img src="https://via.placeholder.com/500x700/0000FF?text=2">
<img src="https://via.placeholder.com/500x600/008000?text=3">
<div style="clear:left;"></div>
<img src="https://via.placeholder.com/500/FFFF00?text=4">
<img src="https://via.placeholder.com/500/808000?text=5">
<img src="https://via.placeholder.com/500/00FFFF?text=6">
<div style="clear:left;"></div>

As you can see, there's a space between image 1 and image 4 as well as between image 3 and image 6.

I want to reach that there's no space between the images that are below each other, by pushing each image up to the image above, but without cutting the images in height.

How can I do that?

David
  • 2,179
  • 2
  • 9
  • 30

1 Answers1

0

I finally ended up with this well-working code:

<style>
.container  {
    width:33.3333333%;
    float:left;
}
img {
    width:100%;
}
.middle {
    margin-left:6px;
    margin-right:6px;
}
</style>

<div class="container">
    <img src="https://via.placeholder.com/500/FF0000?text=1">
    <img src="https://via.placeholder.com/500/FFFF00?text=4">
</div>

<div class="container" class="middle">
    <img src="https://via.placeholder.com/500x700/0000FF?text=2">
    <img src="https://via.placeholder.com/500/808000?text=5">
</div>

<div class="container">
    <img src="https://via.placeholder.com/500x600/008000?text=3">
    <img src="https://via.placeholder.com/500/00FFFF?text=6">
</div>
David
  • 2,179
  • 2
  • 9
  • 30
  • Just a suggestion: Take a look at the flexbox layout mode. This type of layout can be accomplished very elegantly in flexbox. Here's a great article from CSS-Tricks on it: [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) – Dan Mullin Aug 14 '20 at 13:48