Вертикальное «пространство-между» распределение изображений без flexbox

Question

У меня есть несколько столбцов изображений разных размеров.Поскольку размеры неизвестны, один столбец будет самым высоким.Теперь я хочу растянуть другие (меньшие) столбцы, чтобы соответствовать этой высоте, увеличив соответствующие промежутки между изображениями.Вот пример изображения:

А вот jsfiddle этого примера, который я настроил с помощью 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>

Однако в моем конкретном случае я не могу использовать flexbox (так как мне нужно установить абсолютное положение некоторых детей), поэтому я сейчас ищу способ добитьсято же самое без flexbox.Есть ли способ получить этот вертикальный «пробел» между без flexbox?

Answer 1

На основании комментария относительно абсолютного позиционирования:

Я пытался заставить абсолютное позиционирование работать безуспешно. В основном я пытаюсь разместить подписи под каждым изображением, однако эти подписи не должны быть частью потока, поэтому промежутки должны оставаться такими же, как если бы не было подписей. Когда я попытался поместить подписи внизу, у меня оказались все подписи внизу всего столбца.

Решение состоит в том, чтобы обернуть изображения и подписи в div (или, что еще лучше, figure) и присвоить эту позицию относительному ... тогда расположите ваши подписи абсолютно.

Вот так:

#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>

Answer 2

исправить высоту изображения и использовать "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>