テキストに応じた列の高さ

Question

3列の行が必要です。列の1つの内部のテキストの長さ/サイズに応じて、3列すべてが同じ高さになる必要があります。したがって、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構造を調整する必要があります。

私はあなたの最終的なhtmlがphpが実行されたように見えるものを複製しました。ここでJSフィドルです：https://jsfiddle.net/qpwgkgfe/39/

UPDATE：ここjsfiddleソリューションは、ブートストラップクラスを使用して応答行われますhttps://jsfiddle.net/qpwgkgfe/44/

は基本的に、あなたが削除する必要がいくつかあります。まずクラスのサムネイルを持つ内部divです。クラスを親divに移動することで同じ効果を得ることができます。次に、CSSファイルからheight: 200pxを削除する必要があります。この設定は、列を一致させる試行をオーバーライドします。

フレックスボックスアプローチは新しくて楽しいですが、いくつかの調整を加えれば、他のソリューションも同様に機能します。あなたはしかし下の境界をうまくする必要がありますhttps://jsfiddle.net/v92g0ddk/3/

：

はここ-marginアプローチを使用して別のjsフィドルです。