Равновесие высоты эскизов

Ответ 1

попробуйте эту скрипту: http://jsfiddle.net/PbfpU/2/ (я использовал script, который вы связали в комментариях)

в любом случае обязательно вызовите эту функцию только после того, как все миниатюры будут загружены, иначе вы можете получить неправильные значения.

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

Ответ 2

Я знаю, что опаздываю на вечеринку, но здесь удобный вариант ответа Фабрицио, завернутый в плагин 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();

Кроме того, если ваши миниатюры содержат изображения, обязательно вызовите это после того, как событие загрузки окна прошло.

Ответ 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>

Подробнее о поддержке браузера см. .

Ответ 4

Мне понравился ответ Тима, и вот моя версия в однострочном лайнере:

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

С кивком Roatin Marth для получения максимального значения массива.

Ответ 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();
});

Ответ 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/