轮播，在与同级物品的div高度相同的物品内制作一个div [英] Carousel, make a div within an item same height as sibling item's div

问题描述

我有一个反应灵敏的Owl Carousel(v2)，每个项目或幻灯片都有一张图片，下面有一些可变长度的文本，请参见下图:

I have an responsive Owl Carousel (v2), each item or slide has an image and below that some text of variable length, see image below:

可以看出，所有图像都在底部对齐到同一基线，而不管有多少文本.我通过将文本div设置为固定高度来完成此操作.问题是，如果只有一行文字，那么轮播下的空间将是多余的.

As can be seen, all the images are bottom aligned to the same baseline, regardless of how much text there is. I've done this by setting the text div to a fixed height. The problem is, if there were to be just one line of text, I'd have unnecessary space below the carousel.

如果我允许div设置自己的高度，则会得到以下信息:

If I allow the div to set its own height, I get this:

所以我的图像不再对齐.

So my images are no longer lined up.

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;
}

推荐答案

直接的HTML和CSS不允许您基于同级对象设置相同的高度.不过，使用一个小的jquery可以实现.

Straight HTML and CSS won't allow you to set equal heights based off siblings. Using a little jquery this can be achieved though.

$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);});
}

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

When I use something like this, I generally move the variable holder to the beginning of the script. Then I call the function on document ready. Sometimes I'll even call it on the window resize function. If you choose to do that, you must call an each function on your object and reset the height to auto before recalling the equalize function.

这篇关于轮播，在与同级物品的div高度相同的物品内制作一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！