Css 响应文本的列高度

我想要一个有3列的行，根据其中一列中文本的长度/大小，所有3列的高度应该相同。因此，考虑到最大尺寸的列，这3列应该具有相同的高度并位于同一行中

这是我得到的错误：

这是我的代码：

---

答案如下：

对于这个特殊的问题，需要对html结构进行一些调整，以使其正常工作

我已经复制了php执行后最终html的样子。这是一把js小提琴：

更新：以下是使用引导类使JSFIDLE解决方案具有响应性：

基本上，有一些东西你需要删除。首先是具有类缩略图的内部div。通过将类移动到父div，可以获得相同的效果。其次，需要从CSS文件中删除

height:200px

。此设置将覆盖使列匹配的尝试

我之所以使用flex box方法，是因为它新颖有趣，但经过一些调整，其他解决方案也会起作用

下面是另一个使用-margin方法的js小提琴：

---

不过，你需要计算出底部边界。

检查这个问题：嗨，我也看到了那篇文章，但两种解决方案都没有解决这个问题。有些列的分布不均匀，有些根本不起作用。谢谢你的回答，但我想要的是，如果其中一列有更多的文本，其他列的高度应该调整到更高的列。我希望3列在同一行中，而不是在单独的行中。你能帮我调整3列的高度而不是宽度吗？我不确定你是否看过链接。尝试更改一列中的文本，然后单击“更新并运行”。这三列将调整它们的大小。你能解释一下“同一排”是什么意思吗。就引导而言，上述示例被认为是在同一行中。\n好的，我想我理解了。您正在查看一个小显示屏的解决方案。我修复了md大小屏幕的引导。我已经用响应版本更新了答案。

<?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();
?>

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