Отрегулируйте высоту всех панелей в строке в соответствии с содержанием

Question

У меня есть строка, которая содержит четыре панели. Я хочу, чтобы высота всех панелей была одинаковой высоты. Например: из-за добавления содержимого на второй панели высота его немного изменилась, и она не находится на той же высоте, что и другие панели. Я хочу, чтобы высота всех остальных панелей изменялась автоматически. Я дал минимальную высоту 250 пикселей для моих панелей. Если высота одной из панелей превышает 250 пикселей, все панели должны настраиваться автоматически. Если высота одной из панелей меньше 250 пикселей (по мере того, как содержимое переходит к панели динамически), высота должна оставаться равной 250 пикселям.

Моя проблема (изображение) link

В изображении выше, второе содержание панели изменяется, но остальные панели находятся в первоначальной высоты.

Что требуется (изображение) link

Мой код

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3"> 
      <div class="panel panel-default" style="min-height:250px;"> 
       <div class="panel-body"> 
        Panel 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Пожалуйста, помогите мне решить мою проблему. Можем ли мы сделать это с помощью только css или использовать Js для этого?

Answer 1

Используйте display:flex и повторно использовать классы Twitter Bootstrap. Пишите меньше, делайте больше!

.row { 
    display: flex; 
} 

.row .col { 
    display: flex; 
    align-items: stretch; 
} 

.row .col .panel { 
    width: 100%; 
} 

.row .col .panel .panel-body { 
    min-height: 250px; 
} 

https://jsfiddle.net/alexndreazevedo/143ez30b/

Answer 2

набор мин-высота панели тела таким образом

CSS

.panel-body{ 
    min-height:250px !important; 
} 

HTML

<div class="container-fluid"> 
<div class="row"> 
<div class="col-md-3"> 
<div class="panel panel-default"> 
    <div class="panel-body"> 
     Panel 
    </div> 
</div> 
</div> 
</div> 
</div> 

Answer 3

Поскольку вы используете Bootstrap, вы также должны использовать JQuery, поэтому я использовал его здесь. Сначала задайте высоту, затем пройдите по панелям ll, чтобы найти максимальную высоту и установите ее, а затем примените эту высоту ко всем панелям.

Это позволяет установить все панели на одну и ту же высоту и отрегулировать, если один отображается на большей высоте, чем другие. Обратите внимание, что вы также должны иметь минимальную высоту, как у вас уже есть. Это была только отправная точка для этого. и вы также должны удалить этот встроенный стиль min-height и поместить его в CSS за пределами HTML.

var maxHeight=250; 

$('.panel').each(function(){ 
var height=$(this).height(); 
if(height> maxHeight){maxHeight=height} 
}); 

$('.panel').css('height',maxHeight+'px'); 

Answer 4

Вы можете сделать это с помощью очень простой в использовании JQuery плагин под названием Match Height

Некоторые функции этой библиотеки, которые вы не найдете в других решениях (простейшие из них)

1. Сопрягайте высоты для групп элементов автоматически
2. использовать максимальную высоту или определять определенный целевой элемент
3. в любом месте на странице a го где-нибудь в DOM
4. реагирующие (обновления на изменения размеров окна)
5. строка в курсе (ручки, плавающие элементы и упаковки)
6. счета для коробчатого проклейки и смешанного обивка, края, границы ценности
7. обрабатывает изображения и другие (обновления после загрузки)
8. поддерживает скрытые или невидимые элементы (например,те внутри вкладки управления)
9. задушил, чтобы сбалансировать производительность и плавность
10. легко удаляется при необходимости
11. сохранить положение прокрутки

Answer 5

Если вы предпочитаете чистый CSS решение, которое вы могли бы легко сделать это с помощью гибкого трубопровода , Обратите внимание, что при таком решении вы должны иметь в виду поддержку браузера. Смотрите здесь: http://caniuse.com/#search=flex

Но с помощью CSS и сгибать вы могли бы сделать:

.wrapper { 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-flex-wrap: wrap; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
} 
 

 
.innerdiv { 
 
    width: 22%; /* 4 items per row */ 
 
    float: left; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    background-color: red; 
 
    margin: 0 1%; 
 
    min-height: 250px; /* Your min-height if needed */ 
 
}

<div class="wrapper"> 
 
    <div class="innerdiv"> 
 
    <p>Lorem ipsum dolor sit amet ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <div class="innerdiv"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <div class="innerdiv"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <div class="innerdiv"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> 
 
    </div> 
 
</div>

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

EDIT:

Ну, я буду объявление на пути JQuery делать это и так, что вам не нужно беспокоиться о поддержке браузера, если вы используете это. Возможно, это поможет кому-то в будущем. Вы также можете проверить поддержку браузера flex в javascript, а в качестве резервного использования jQuery установить высоту div.

(function($, window, document, undefined) { 
 

 
    'use strict'; 
 
    
 
    var doc = document.body || document.documentElement, 
 
     doc = doc.style; 
 
    // This would check the browser support for flex and only use this fallback if there is no support (otherwise use css) 
 
    /* 
 
    if(doc.webkitFlexWrap == '' || doc.msFlexWrap == '' || doc.flexWrap == '') { 
 
    return true; 
 
    } 
 
    */ 
 
    
 
    var $wrapper = $('.wrapper'), 
 
     $items = $wrapper.find('.innerdiv'), 
 
     setDivHeight = function() { 
 
     $items.css('height', 'auto'); 
 
     var itemsPerRow = Math.floor($wrapper.width()/$items.width()); 
 
     
 
     if(itemsPerRow == null || itemsPerRow < 2) { 
 
      return true; 
 
     } 
 
     
 
     for(var i = 0, j = $items.length; i < j; i += itemsPerRow) { 
 
      var maxHeight = 0, 
 
       $item = $items.slice(i, i + itemsPerRow); 
 
       $item.each(function() { 
 
       var itemHeight = parseInt($(this).outerHeight()); 
 
       if (itemHeight > maxHeight) { 
 
        maxHeight = itemHeight; 
 
       } 
 
       }); 
 
       $item.css('height', maxHeight); 
 
      } 
 
     }; 
 
     
 
    
 
    setDivHeight(); 
 
    $(window).on('resize', setDivHeight); 
 
    $wrapper.find('img').on('load', setDivHeight); 
 
    
 
})(jQuery, window, document);

.innerdiv { 
 
    width: 22%; 
 
    float: left; 
 
    background-color: red; 
 
    margin: 0 1%; 
 
    min-height: 250px; /* your min-height if needed */ 
 
} 
 

 
img { 
 
    height: auto; 
 
    width: 100%; 
 
    padding: 5px; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="innerdiv"> 
 
    <p>Lorem ipsum dolor sit amet ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <img src="http://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg" alt="Large image" /> 
 
    </div> 
 
    <div class="innerdiv"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <div class="innerdiv"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <div class="innerdiv"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> 
 
    </div> 
 
</div>

EDIT 2:

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

Answer 6

< сценарий >    
вар а = Math.max (document.getElementById ("левый"). OffsetHeight, document.getElementById ("центр"). OffsetHeight, document.getElementById ("право"). OffsetHeight);   // получить максимальную высоту
document.getElementById ("left"). Style.height = a + "px";    
document.getElementById ("center"). Style.height = a + "px";    
document.getElementById ("right"). Style.height = a + "px";    
</скрипт >  

<script> 
 
    var a = Math.max(document.getElementById("left").offsetHeight,document.getElementById("center") 
 
        .offsetHeight,document.getElementById("right").offsetHeight); 
 
    document.getElementById("left").style.height = a + "px"; 
 
    document.getElementById("center").style.height = a + "px"; 
 
    document.getElementById("right").style.height = a + "px"; 
 
</script>