等于缩略图的高度答案

【问题标题】：Equals heights of thumbnails等于缩略图的高度
【发布时间】：2016-10-19 22:52:35
【问题描述】：

每个 Twitter Bootstrap 行我有 3 个 thumbnail span3 元素，但 <p> 文本是可变的，这会破坏布局。如何将每个 thumbnail 设置为最大缩略图的高度，以便它们正确流动？

<div class="box_line" style="float: left; border: 1px solid red;">
  <div class="thumbnail span3">
    <img src="http://placehold.it/260x180" alt=""/>
    <div class="caption">
      <h5>Thumbnail label</h5>
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    </div>
  </div>
</div>

我还没有找到一个有效的 jQuery 插件来做这件事，this topic 中的解决方案对我也不起作用。

【问题讨论】：

对不起，我听不懂你的英文：“每次
元素中的文本都有其他高度”是什么意思，“最高缩略图”是什么意思？跨度>
也许知道为什么要让所有具有相同高度的盒子尝试不同的方法（纯 CSS）会很有用
@GeorgeKatsanos 有时 P 标记中的文本可以有 10 个字符，有时 300 个字符 => p 中的文本将在一个行，或者也可以在 5 行上。 “最高的缩略图”是最高的缩略图（由于p中的可变文本）
@FabrizioCalderan 因为我尝试获取this effect。（这个例子对我不起作用）
@user984621 也许您正试图在完整图像加载之前获取列高度。你能提供一个你所做的演示吗？

标签： html css twitter-bootstrap

【解决方案1】：

试试这个小提琴：http://jsfiddle.net/PbfpU/2/（我使用了你在 cmets 中链接的脚本）

无论如何，请确保仅在加载所有缩略图后才调用该函数，否则您可能会得到错误的值。

function equalHeight(group) {    
    var tallest = 0;    
    group.each(function() {       
        var thisHeight = $(this).height();       
        if(thisHeight > tallest) {          
            tallest = thisHeight;       
        }    
    });    
    group.each(function() { $(this).height(tallest); });
} 

$(document).ready(function() {   
    equalHeight($(".thumbnail")); 
});

【讨论】：

但问题是，这个示例在 Chrome 中不起作用 - 这里是通过第一个框设置行的高度（在 FF 中它起作用。）
嗨，Fabrizio，您能再给我发一份 Chrome 的修复程序吗？
很高兴看到此答案中的代码，而不必遵循链接。
应该改为tallest = 0;，而不是var tallest = 0;。否则，这将成为 window 对象的全局属性：-(

【解决方案2】：

我知道我迟到了，但这是 Fabrizio 答案的一个方便的变体，封装为一个 jQuery 插件：

(function($) {
    $.fn.uniformHeight = function() {
        var maxHeight   = 0,
            max         = Math.max;

        return this.each(function() {
            maxHeight = max(maxHeight, $(this).height());
        }).height(maxHeight);
    }
})(jQuery);

...并使用它：

$(".thumbnails").find(".thumbnail").uniformHeight();

另外，如果您的缩略图包含图像，请确保在窗口加载事件触发后调用它。

【讨论】：

+1 提到等待所有图片加载

【解决方案3】：

CSS 解决方案是使用clear: left; 来处理应该排在第一位的每个缩略图。如果您事先知道连续缩略图的数量，则此方法有效。

我使用以下 css 类：

ul.thumbnails.per6 > li:nth-child(6n+1) {
  clear: left;
}

HTML 看起来像这样：

<ul class="thumbnails per6">
  <li class="span2">
    <div class="thumbnail">...</div>
  </li>
</ul>

浏览器支持请见this。

【讨论】：

【解决方案4】：

我喜欢 Tim 的回答，这是我的单行版本：

$(".thumbnail").height(Math.max.apply(null, $(".thumbnail").map(function() { return $(this).height(); })));

向Roatin Marth 致敬以获得数组的最大值。

【讨论】：

这非常有效，实际上将它插入到我的引导设置中，该设置具有未知数量的可变高度缩略图。谢谢！

【解决方案5】：

对于响应式网站，您可能希望在调整窗口大小时更新高度。我用 Gaby aka G. Petrioli 的巧妙技巧扩展了 Tim Lowrimore 的 uniformHeight 插件，使用 wrapInner https://stackoverflow.com/a/6853368/1138558 获取元素内容的高度。

(function ($) {
    $.fn.uniformHeight = function () {
        var maxHeight = 0,
            wrapper,
            wrapperHeight;

        return this.each(function () {

            // Applying a wrapper to the contents of the current element to get reliable height
            wrapper = $(this).wrapInner('<div class="wrapper" />').children('.wrapper');
            wrapperHeight = wrapper.outerHeight();

            maxHeight = Math.max(maxHeight, wrapperHeight);

            // Remove the wrapper
            wrapper.children().unwrap();

        }).height(maxHeight);
    }
})(jQuery);

然后我使用以下方法将其应用于缩略图：

$('.thumbnails').find('.thumbnail').uniformHeight();

$(window).resize(function () {
    $('.thumbnails').find('.thumbnail').uniformHeight();
});

【讨论】：

【解决方案6】：

使用 css flexbox，可以用 css 制作等高的缩略图

这里有最好的例子

.equal-height-thumbnail {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  
  margin: 0;
  padding: 0;
  list-style: none;
}

.equal-height-thumbnail li {
  width: 22%;
  margin: 0 1% 20px;
  padding:0 0.5%;
  background: #FFF;
  box-shadow: 0 0 1px 1px rgba(0,0,0,0.1)
}
.equal-height-thumbnail figure {
  display: block;
  margin: 5px 0;
  padding: 0;
}
.equal-height-thumbnail figure img{ width:100%;}
.caption { padding: 2%;}

<ul class="equal-height-thumbnail">
    <li>
      <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
      <div class="caption">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. </p>
      </div>
    </li>
    <li>
      <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
      <div class="caption">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Aliquam erat volutpat. Curabitur, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattit felis. Aliquam erat volutpat. Curabitur </p>
      </div>
    </li>
    <li>
      <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
      <div class="caption">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </p>
      </div>
    </li>
    <li>
      <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
      <div class="caption">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. Aliquam erat volutpat. Curabitur </p>
      </div>
    </li>
    <li>
      <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
      <div class="caption">
        <p>Lorem ipsum dolor sit amet, tempor nec eget felis. Aliquam erat volutpat. Curabitur </p>
      </div>
    </li>
    <li>
      <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
      <div class="caption">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. Aliquam erat volutpat. Curabitur </p>
      </div>
    </li>
    <li>
      <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
      <div class="caption">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nabitur </p>
      </div>
    </li>
 
  </ul>

【讨论】：

【解决方案7】：

css 中的这段代码

/*in css*/
  .thumbnail img{
   height:100px;
                }

/或者直接内联添加/

  <img="imglinkwhateveryouwant" style="height:100px;">

就是这样！！！

【讨论】：

【解决方案8】：

只需在下面添加 css 即可解决您的问题。

.container{
    display: flex;
    flex-wrap: wrap;
  }

您可以在此处查看结果。 http://www.bootply.com/RqapUKLqMF

【讨论】：

这行不通。您只是对所有人使用相同的内容

【解决方案9】：

只需设置一个最大高度。

.caption p {
   height: 120px;
}

http://jsfiddle.net/F5eCq/

【讨论】：

这是非响应式的，这违背了使用 Twitter Bootstrap 的thumbnails 的主要目的，因为如果图像（以及其他可能的元素）碰巧有不同的高度，就会出现同样的问题。这对我自己来说是一个挫折点，但这不是一个灵活的解决方案。