一些缩略图的高度相等

Question

我正在做一个项目，但我遇到了一些事情，说起来容易，但我无法解决它：) 所以，我正在使用引导网格系统，在一个内容中，我想每行放六个缩略图（只是一张照片和下面的一些文本），直到现在，图像下面的文本因缩略图而异，但我想要每个缩略图都取最高的高度，这将是自动的，并且文本在该 div 上垂直对齐 :) 有人可以帮忙吗？

  <div class="row">
        <div class="col-md-12 col-xs-12" >
            <div class="panel panel-default">
                <div class="panel-heading clearfix">
                    <i class="icon-book"></i>
                    <h3 class="panel-title">Facultati</h3>
                </div>                  
                <div id="main-panel" class="panel-body">
                    <div class="row gallery">
                        <div class="col-md-2 col-sm-2 col-xs-6">
                            <a href="faculty-page.html">
                                <div class="thumbnail">
                                    <img style="height:100px" src="img/faculty.jpg" alt="Cloud Admin" class="img-responsive">
                                    <div class="caption">
                                        <h3 style="text-align:center;font-size:20px">Facultatea de Matematica si Informatica</h3>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="col-md-2 col-sm-2 col-xs-6">
                            <a href="faculty-page.html">
                                <div class="thumbnail" >
                                    <img style="height:100px" src="img/faculty.jpg" alt="Examene" class="img-responsive">
                                    <div class="caption">
                                        <h3 style="text-align:center">Examene</h3>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="col-md-2 col-sm-2 col-xs-6">
                            <a href="faculty-page.html">
                                <div class="thumbnail">
                                    <img style="height:100px" src="img/faculty.jpg" alt="Cloud Admin" class="img-responsive">
                                    <div class="caption">
                                        <h3 style="text-align:center">Lab1.doc</h3>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="col-md-2 col-sm-2 col-xs-6">
                            <a href="faculty-page.html">
                                <div class="thumbnail">
                                    <img style="height:100px" src="img/faculty.jpg" alt="Cloud Admin" class="img-responsive">
                                    <div class="caption">
                                        <h3 style="text-align:center">Facultatea de Geografie</h3>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div> 

这是 HTML

.caption{
display:table;
height:auto;}


.caption h3{
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
 }

这里是 CSS（仅用于这部分） 谢谢。

Answer 1

仅使用 CSS 实现这一点非常困难（而且可能需要大量的“hacking”）。相反，您可以使用 javascript 方法，计算这些缩略图的最大高度，然后将最大值应用于所有缩略图。

这是我几个月前制作的一个函数（它在 jquery 中，但您可以轻松地将其重写为“vanilla”javascript）。

function maxHeight(selected){
    var current = 0, max = 0;

    $(selected).each(function(){
        current = $(this).height();
        max = Math.max(current, max);
    });
    $(selected).height(max);
}

maxHeight("thumbnail");