等于缩略图的高度

每个Twitter引导行有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插件来做这件事，这个主题中的解决方案也不适合我。

试试这个小提琴：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")); 
});

我知道我参加聚会迟到了，但这里有一个关于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();

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

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>

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

我喜欢Tim的回答，下面是我的一行代码版本：

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

向Roatin Marth致敬，因为他获得了数组的最大值。

对于响应网站，您可能需要在调整窗口大小时更新高度。我用Gaby（又名G.Petrioli）的聪明技巧扩展了Tim Lowrimore的uniformHeight插件，用wrappeInner获得元素内容的高度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();
});

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

css 中的此代码

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

/或只是将其内联添加/

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

就是这样！！！

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

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

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

只需设置一个最大高度。

.caption p {
   height: 120px;
}

http://jsfiddle.net/F5eCq/

相关内容

最新更新

热门标签：