响应文本的列高

Question

我想要一行 3 列，根据其中一列内文本的长度/大小，所有 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 结构进行一些调整才能使其正常工作。

我已经复制了执行 php 后您的最终 html 的样子。这是一个 js 小提琴：https://jsfiddle.net/qpwgkgfe/39/

更新：这是使用引导类做出响应的 jsfiddle 解决方案：https://jsfiddle.net/qpwgkgfe/44/

基本上，您需要删除一些内容。首先是带有类缩略图的内部 div。您可以通过将类移动到父 div 来获得相同的效果。其次，您需要从 CSS 文件中删除 height: 200px。此设置将覆盖使列匹配的尝试。

我使用了 flex-box 方法，因为它新颖有趣，但经过一些调整，其他解决方案也可以使用。

这是另一个使用 -margin 方法的 js fiddle：https://jsfiddle.net/v92g0ddk/3/

不过，您需要计算出底部边框。