響應文本的列高度

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

響應文本的列高度

回答

相關問題