Question

每个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中的解决方案对我来说也不起作用。

Answer 1

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

无论如何一定要在加载完所有缩略图后调用该函数，否则你可能会得到错误的值。

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

Answer 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();

此外，如果缩略图包含图像，请务必在窗口加载事件触发后调用此图像。

Answer 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。

Answer 4

我喜欢蒂姆的回答，这是我的版本在单行中：

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

点头Roatin Marth获取数组的最大值。

Answer 5

对于自适应网站，您可能希望更新窗口大小调整的高度。我将Tim Lowrimore的uniformHeight插件扩展为Gaby aka G. Petrioli使用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();
});

Answer 6

使用css flexbox，可以使用css等同于缩略图的高度

这里有最好的例子

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

这段代码在css中

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

/ 或只是将其添加到内联 /

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

那就是!!!

Answer 8

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

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

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

Answer 9

只需设置最大高度。

.caption p {
   height: 120px;
}

http://jsfiddle.net/F5eCq/

等于缩略图的高度

9 个答案: