html - "space-between"没有flexbox的图片垂直分布

Question

我有几列不同尺寸的图像。由于尺寸未知，一列将是最高的。我现在想通过相应地增加图像之间的间隙来拉伸(stretch)其他(较小的)列以匹配该高度。这是一个示例图片:

这是一个 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(因为我需要绝对定位一些 child )，所以我现在正在寻找一种无需 flexbox 即可实现相同目的的方法。有什么方法可以 flexbox 来获得这种垂直的“间隔”分布？

Answer 1

基于关于绝对定位的评论:

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.

解决方案是将图像和标题生锈包裹在一个 div 中(或者更好的是一个 figure)并给那个位置 relative...然后绝对定位你的标题。

像这样:

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