Автоматическая настройка высоты элементов обертки div на основе самого большого div

Question

Как многие дизайнеры могут столкнуться с проблемой с автоматической настройкой высоты всей оберткой div до высоты максимальной высоты div.

Допустим, я следующая структура, чтобы показать свои вещи в блоге

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
    <div class="blog-item"> 
     <div class="img">IMAGE</div> 
     <div class="title">SOME TITLE</div> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
    <div class="blog-item"> 
     <div class="img"></div> 
     <div class="title"></div> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
    <div class="blog-item"> 
     <div class="img"></div> 
     <div class="title"></div> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
    <div class="blog-item"> 
     <div class="img"></div> 
     <div class="title"></div> 
    </div> 
</div> 

и каждый из элементов блога имеет изображение и название и дату, связанную с ним. Заголовок может быть одним заголовком строки или двумя строками или тремя строками. что затрудняет настройку высоты blog-item, мы можем дать max-height, который обычно работает, но добавляет лишнее пространство, если этот элемент блога и одно название строки. есть ли способ, которым мы можем автокорректировать высоту blog-item обертка на основе самой большой высоты на любом blog-item div.

В случае, если мы работаем с max-height, то мы должны принять максимальную высоту blog-item в противном случае дизайн может сломаться, если название больше, чем 3 линии

Answer 1

flexbox может решить вашу проблему.

#container { 
 
    display: flex; 
 
    align-items: stretch; 
 
} 
 

 
#container > div { 
 
    border: 1px solid black; 
 
}

<div id="container"> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
 
      <div class="blog-item"> 
 
       <div class="img">IMAGE</div> 
 
       <div class="title">SOME TITLE</div> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
 
      <div class="blog-item"> 
 
       <div class="img">image2</div> 
 
       <div class="title">title2</div> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
 
      <div class="blog-item"> 
 
       <div class="img">image3</div> 
 
       <div class="title">title3</div> 
 
       <div class="desc">long descriptions</div> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
 
      <div class="blog-item"> 
 
       <div class="img">image4</div> 
 
       <div class="title">title4</div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 2

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

Мое стандартное (безгибкое) решение является настольным css. Очень просто: вся строка получает display: table и каждый столбец получает display: table-cell

В вашем случае,

.row { 
 
    display: table; 
 
} 
 
.row > div { 
 
    display: table-cell; 
 
    border: 1px solid blue; 
 
}

<div class="row"> 
 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
 
    <div class="blog-item"> 
 
     <div class="img">IMAGE</div> 
 
     <div class="title">SOME TITLE</div> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
 
    <div class="blog-item"> 
 
     <div class="img">image</div> 
 
     <div class="title">longer 
 
     <br/>title</div> 
 
    </div> 
 
    </div> 
 
</div>

Для более полного обсуждения некоторых из вариантов, см https://css-tricks.com/fluid-width-equal-height-columns/

Answer 3

Этот раствор составляет от Ed Eliot's blog

Сделайте divs/columns очень высоким, добавив нижнюю часть: 100%, а затем «обманите браузер», думая, что они не так высоки, используя margin-bottom: -100% (или) 100%. Это лучше объясняется Эд Элиотом в его блоге, который также включает в себя множество примеров.

Пример кода

.column { 
    padding-bottom: 1000px; 
    margin-bottom: -1000px; 
} 

Demo here

Вы также можете использовать Flex/Flexbox, если вы хотите, чтобы адаптировать CSS3

Просто установите дисплей свойство внешнего DIV изгибаться

display: flex; 
align-items: stretch; 

Редактировать: Использование flexbox с бутстрапом Demo here

Answer 4

Это решение через jquery ...

http://jsfiddle.net/mkdizajn/5ztns5sf/

var maxh = 0; 
$('.column').each(function(){ 
    var currh = parseInt($(this).height()) 
    if(currh > maxh){ maxh = currh } 
}); 
$('.column').height(maxh)