0

I have several columns of images of different sizes. As the sizes are unknown, one column will be the tallest. I now want to stretch out the other (smaller) columns to match that height by increasing the gaps between the images accordingly. Here is an example image:

enter image description here

And here is a jsfiddle of this example that I set up with flexbox.

#main {
  width: 50%;
  display: flex;
  justify-content: space-between;
}

.column {
  background-color: lightpink;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.column:last-child {
  margin-right: 0;
}

.column img {
  width: 100%;
  align-self: center;
}
<div id="main">

  <div class="column">
    <img src="http://placekitten.com/g/200/300">
    <img src="http://placekitten.com/200/300">
    <img src="http://placekitten.com/g/200/400">
  </div>

  <div class="column">
    <img src="http://placekitten.com/g/200/200">
    <img src="http://placekitten.com/200/280">
    <img src="http://placekitten.com/g/200/250">
  </div>

  <div class="column">
    <img src="http://placekitten.com/g/200/400">
    <img src="http://placekitten.com/200/220">
    <img src="http://placekitten.com/g/200/260">
  </div>

</div>

However in my specific case, I cannot use flexbox (as I need to absolute position some children), so I am now looking for a way to achieve the same thing without flexbox. Is there any way to get this vertical "space-between" distribution without flexbox?

MrMaavin
  • 1,611
  • 2
  • 19
  • 30
mdomino
  • 1,195
  • 1
  • 8
  • 22
  • 1
    Why would using flexbox mean that you can't use absolute positioning? – Paulie_D Oct 26 '18 at 12:37
  • 1
    The alternative is probably a JS solution like Masonry or Packery. I'd try to get your absolute positioning working, though. I've done similar with success. You may need a few more wrapper components, but it's likely possible. – isherwood Oct 26 '18 at 12:40
  • @Paulie_D I have tried to get the absolute positioning to work without any success. Basically I am trying to place captions underneath each images, however this captions should *not* be part of the flow, so the gaps should keep the same with as if there were no captions. When I tried to place the captions underneath, I ended up with all captions on the bottom of the entire column. Should I maybe edit my question and give a litte snippet as an example? – mdomino Oct 26 '18 at 12:43
  • 1
    Just wrap the images and captions in a div (or better still a `figure`) and give that position relative...then position your captions. – Paulie_D Oct 26 '18 at 12:45
  • But won't the caption divs then be part of the flow, i.e. they claim some space? I would like them to not interrupt the flexbox spacing flow of the images at all. In the sense that some of the captions could even overlap the following images (given the caption is long enough). – mdomino Oct 26 '18 at 12:47
  • 1
    No...the div is in the flow, the image and caption are in the div and the caption can then be positioned according to the div. – Paulie_D Oct 26 '18 at 12:48

2 Answers2

1

Based on the comment regarding absolute positioning:

I have tried to get the absolute positioning to work without any success. Basically I am trying to place captions underneath each images, however this captions should not be part of the flow, so the gaps should keep the same with as if there were no captions. When I tried to place the captions underneath, I ended up with all captions on the bottom of the entire column.

The solution is to rust wrap the images and captions in a div (or better still a figure) and give that position relative...then position your captions absolutely.

Like so:

#main {
  max-width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

.column {
  background-color: lightpink;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.holder {
  position: relative;
}

.column img {
  display: block;
  max-width: 100%;
  height: auto;
}

.caption {
  position: absolute;
  bottom: 0;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
}
<div id="main">

  <div class="column">
    <div class="holder">
      <img src="http://placekitten.com/g/200/300">
    </div>
    <div class="holder"> <img src="http://placekitten.com/200/300"></div>
    <div class="holder">
      <img src="http://placekitten.com/g/200/400">
    </div>
  </div>

  <div class="column">
    <div class="holder">
      <img src="http://placekitten.com/g/200/200">
      <div class="caption">My Caption</div>
    </div>
    <div class="holder"> <img src="http://placekitten.com/200/280"></div>
    <div class="holder">
      <img src="http://placekitten.com/g/200/250">
      <div class="caption">My Caption</div>
    </div>
  </div>
  <div class="column">
    <div class="holder">
      <img src="http://placekitten.com/g/200/400">
      <div class="caption">Superduper long Caption In Here</div>
    </div>
    <div class="holder"> <img src="http://placekitten.com/200/220"></div>
    <div class="holder">
      <img src="http://placekitten.com/g/200/260">
    </div>
  </div>

</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Thank you so much, Paulie_D, this is exactly what I needed. Sorry for the unnecessary question, but I had tried around for half a day already without success, something must have been messed up in my setup. Now, what is the correct etiquette? Should I accept your answer as the correct answer even though it does not answer my original question? Or should I just upvote it? Or should I even edit my original question? What would be the best option? – mdomino Oct 26 '18 at 13:09
  • You are free to vote or accept as you wish. Either would be appreciated but if it helped an upvote would be the general option. You never know, someone may have a better solution which might deserve acceptance. – Paulie_D Oct 26 '18 at 13:17
  • Just to give you a further confirmation. I implemented your solution in my actual setup and it works just perfectly. I think the only thing I was missing was the `position: relative` part on the div container \*sigh\*. So thank you again, this was actually a big help for me. – mdomino Oct 26 '18 at 14:12
0

fix image height and use "object-fit:cover;" 

#main {
  width: 50%;
  display: flex;
  justify-content: space-between;
}

.column {
  background-color: lightpink;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.column:last-child {
  margin-right: 0;
}

.column img {
  width: 100%;
  align-self: center;
  height:100px;
     object-fit: cover;
}
<div id="main">

  <div class="column">
    <img src="http://placekitten.com/g/200/300">
    <img src="http://placekitten.com/200/300">
    <img src="http://placekitten.com/g/200/400">
  </div>

  <div class="column">
    <img src="http://placekitten.com/g/200/200">
    <img src="http://placekitten.com/200/280">
    <img src="http://placekitten.com/g/200/250">
  </div>

  <div class="column">
    <img src="http://placekitten.com/g/200/400">
    <img src="http://placekitten.com/200/220">
    <img src="http://placekitten.com/g/200/260">
  </div>

</div>
Sarvaiya Vasim
  • 26
  • 2
  • Sorry, this is *not* what I am trying to do. I am trying to do the very same thing that my jsfiddle already shows, but *without* flexbox. – mdomino Oct 26 '18 at 12:44