Высота столбца, реагирующая на текст

Question

Я хочу строку с тремя столбцами, которая в зависимости от длины/размера текста внутри одного из столбцов должна состоять из всех трех столбцов одинаковой высоты. Таким образом, 3 столбца должны иметь одинаковую высоту и находиться в одной строке с учетом столбца наибольшего размера.

Это ошибка, я получаю:

http://prntscr.com/d4getm

Это код, который у меня есть:

<?php// Define our WP Query Parameters ?> 
<?php $the_query = new WP_Query('posts_per_page=3'); ?> 

<?php// Start our WP Query ?> 
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?> 

     <div class="col-sm-6 col-md-3"> 

<div class="thumbnail"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(100, 100)); ?></a> 
<div class="caption">    
<?php// Display the Post Title with Hyperlink?> 
<h3 class="center"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3> 



<!--// Repeat the process and reset once it hits the limit--> 
</div>  
</div>  
</div> 

<?php 
endwhile; 
wp_reset_postdata(); 
?> 

И это CSS:

div.caption{ 
    text-align: center; 
} 
div.thumbnail{ 
    border: 4px inset black; 
    height: 200px; 
} 
h3.center{ 
    font-size: 20px; 
} 

Answer 1

Ответ можно найти здесь: How can I make Bootstrap columns all the same height?

Для этой конкретной проблемы необходимо внести некоторые изменения в структуру html, чтобы заставить ее работать.

Я воспроизвел то, что, как мне кажется, ваш конечный html выглядит, как только выполняется php. Вот JS скрипку: https://jsfiddle.net/qpwgkgfe/39/

UPDATE: Вот jsfiddle решение переделана с использованием начальной загрузки классов: https://jsfiddle.net/qpwgkgfe/44/

В принципе, Есть несколько вещей, которые нужно удалить. Сначала это внутренний div с миниатюрой класса. Вы можете получить тот же эффект, перемещая класс в родительский div. Во-вторых, вам нужно удалить height: 200px из вашего файла CSS. Этот параметр будет превышать попытки сопоставить столбцы.

Я использовал подход flex-box, потому что он новый и забавный, но с некоторыми настройками будут работать и другие решения.

Вот еще один JS скрипку используя -margin подход: https://jsfiddle.net/v92g0ddk/3/

Вы должны будете отработать нижнюю границу, хотя.