响应文本的列高度

我想要一行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; 
}

来源

2016-11-08 FilT

看看这个问题：http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – Asher

嗨，我看到这篇文章，但也没有的解决方案解决了这个问题。有些没有均匀分布色谱柱，有些则根本无法使用。 – FilT

答案在这里找到：How can I make Bootstrap columns all the same height?

对于这个特定问题，需要对html结构进行一些调整才能使其正常工作。

我复制了我想象的最终的html看起来像一旦php执行。这里有一个JS提琴：https://jsfiddle.net/qpwgkgfe/39/

更新：这里是的jsfiddle溶液使响应使用自举类：https://jsfiddle.net/qpwgkgfe/44/

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

我已经使用了弹性盒方法，因为它很新颖有趣，但是通过一些调整，其他解决方案也可以工作。

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

你需要工作，虽然从底部边框。

来源

2016-11-09 04:06:08 Asher

谢谢你的回答，但我想要的是，如果其中一列有更多文本，其他列应该调整到高度较高的列。我想要3列在同一行，而不是在单独的行。你能帮我调整3列的高度而不是宽度吗？ – FilT

我不确定您是否查看了https://jsfiddle.net/gpwgkgfe/39/链接。尝试更改一列中的文本，然后单击更新并运行。三列将调整其大小。你能向我解释你'同一排'的含义吗？在引导方面，上面的例子被认为是在同一行。\ – Asher

好吧，我想我明白了。您正在查看小型显示器的解决方案。我修复了一个md大小屏幕的引导程序。我已经用一个响应版本更新了答案。 – Asher

响应文本的列高度

回答

相关问题