Равно высоты миниатюр

У меня 3 thumbnail span3 элементов в строке Twitter Bootstrap, но <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 для этого, и решение в этой теме мне тоже не подходит.

Источник

9 ответов

Решение

Попробуйте эту скрипку: 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")); 
});
Источник

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

Пожалуйста, посмотрите это для поддержки браузера.

Источник

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

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

С кивком Роатину Марту за получение максимального значения массива.

Источник

Для отзывчивых сайтов вы можете обновить высоту при изменении размера окна. Я продлил Тим Лоуримор uniformHeight плагин с умным трюком Gaby aka G. Petrioli для получения высоты содержимого элементов с помощью wrapInner https://stackru.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/

Источник
Другие вопросы по тегам