没有flexbox的图像的垂直“间隔”分布

Question

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

这是我使用flexbox设置的本示例的jsfiddle。

#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即可实现相同目的的方法。有没有办法在没有弹性框的情况下获得垂直的“中间间隔”分布？

？

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>