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实现这一点真的很难（并且它可能需要相当多的“黑客攻击”）。相反，您可以通过计算这些缩略图的最大高度然后将max-value应用于所有缩略图来使用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");

一些缩略图的高度相等

1 个答案: