轮播，在与兄弟项目的 div 高度相同的项目内创建一个 div

Question

我有一个响应式 Owl Carousel (v2)，每个项目或幻灯片都有一个图像，下面是一些可变长度的文本，见下图：

可以看出，无论有多少文本，所有图像都底部对齐到相同的基线。我通过将文本 div 设置为固定高度来完成此操作。问题是，如果只有一行文本，我会在轮播下方留出不必要的空间。

如果我允许 div 设置自己的高度，我会得到：

所以我的图像不再排列。

HTML

    <div>
      <img class='a4_diary_image' src='sizes/test.png'>
      <div class='owl_diary_desc'>
        A4 size, this is going on to two lines
      </div>
    </div>

     <div>
      <img class='a5_diary_image' src='sizes/test.png'>
       <div class='owl_diary_desc'>
        A5 size 
      </div>
   </div>

    <div>
      <img class='a6_diary_image' src='sizes/test.png'>
       <div class='owl_diary_desc'>
        A6 size 
      </div>
   </div>

</div>

CSS

.owl-carousel .owl-item {
  display: table-cell;
  float: none;
  text-align: center;
  vertical-align: bottom;
  border: 1px dashed grey;
  height: 100%;
  padding: 0px 10px;
}


.owl_diary_desc {
  font-size: 19px;
  border: 1px dashed red;
  margin-top:10px;
}




.a4_diary_image {
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}


.a5_diary_image {
  max-width: 70%;
  max-height: 70%;
  margin-left: auto;
  margin-right: auto;
}


.a6_diary_image {
  max-width: 50%;
  max-height: 50%;
  margin-left: auto;
  margin-right: auto;
}

Answer 1

纯 HTML 和 CSS 不允许您根据同级设置相等的高度。不过，使用一点 jquery 就可以实现。

$maxDesc;
function equalize(){
    $('.owl_diary_desc').each(function(i){
        if ($(this).height() > $maxDesc) { $maxDesc = $(this).height();}
    });

    $('.owl_diary_desc').each(function(i){$(this).height($maxDesc);});
}

当我使用这样的东西时，我通常将变量持有者移动到脚本的开头。然后我调用文档准备好的函数。有时我什至会在窗口调整大小功能上调用它。如果您选择这样做，则必须调用对象上的 each 函数并将高度重置为 auto，然后再调用 equalize 函数。