Html 等于缩略图的高度

Equals heights of thumbnails

提问by user984621

I have 3 thumbnail span3elements per Twitter Bootstrap row but the the <p>text is variable which breaks the layout. How could I set each thumbnailto be the height of the largest thumbnail so that they flow correctly?

我thumbnail span3每个 Twitter Bootstrap 行有 3 个元素，但<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>

I haven't found a working jQuery plugin to do this and the solution in this topicdoesn't work for me either.

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

回答by Fabrizio Calderan

try this fiddle : http://jsfiddle.net/PbfpU/2/(I used the script you linked in the comments)

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

anyway be sure to call that function only after all thumbnails have been loaded, otherwise you could get wrong values.

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

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

回答by Tim Lowrimore

I know I'm late to the party, but here's a handy variation on Fabrizio's answer, wrapped up as a jQuery plugin:

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

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

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

...and to use it:

...并使用它：

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

Also, if your thumbnails contain images, make sure to call this after the window load event has fired.

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

回答by denis-bu

CSS solution would be to use clear: left;for every thumbnail that should be first in the row. This works if you know number of thumbnails in a row beforehand.

CSS 解决方案将clear: left;用于应该在行中第一个的每个缩略图。如果您事先知道一行中的缩略图数量，这将起作用。

I use following css class:

我使用以下 css 类：

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

And HTML looks like this:

HTML 看起来像这样：

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

Please see thisfor browser support.

请参阅此以获取浏览器支持。

回答by Benjamin Curtis

I liked Tim's answer, and here's my version in a one-liner:

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

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

With a nod to Roatin Marthfor getting the maximum value of an array.

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

回答by Simon Woodhead

For responsive sites, you may want to update the height on window resize. I extended Tim Lowrimore's uniformHeightplugin with Gaby aka G. Petrioli's clever trick for getting the height of an elements content using wrapInner https://stackoverflow.com/a/6853368/1138558.

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

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

I then applied it to the thumbnails using:

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

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

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

回答by Ashok

Using the css flexbox, it's possible to make equals heights of thumbnails with css

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

Here have best example

这里有最好的例子

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

回答by Capsen

Just add below css will fix your issue.

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

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

You can see the result here. http://www.bootply.com/RqapUKLqMF

你可以在这里看到结果。 http://www.bootply.com/RqapUKLqMF

回答by Aniket Patil

this code in css

css中的这段代码

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

/or just add it inline/

/或直接添加它/

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

that's it!!!

就是这样！！！

回答by Andrew Luzkovky

Just set a maximum height.

只需设置一个最大高度。

.caption p {
   height: 120px;
}

http://jsfiddle.net/F5eCq/

http://jsfiddle.net/F5eCq/