旋转木马，在与兄弟项目的div

Question

我有一个响应的猫头鹰旋转木马（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可以实现这一点。

char *text

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