Question

我想要一个包含3列的行，这取决于其中一列内部文本的长度/大小，所有3列应具有相同的高度。因此，3列应该具有相同的高度并且考虑到最大尺寸的列而在同一行中。

这是我得到的错误：

这是我的代码：

<?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看起来像。这是一个小提琴：https://jsfiddle.net/qpwgkgfe/39/

更新：以下是使用bootstrap类响应的jsfiddle解决方案：https://jsfiddle.net/qpwgkgfe/44/

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

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

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

你需要弄清楚底部边框。

列高度响应文本

1 个答案: