【发布时间】：2018-04-08 02:37:53
【问题描述】：
在我的搜索结果页面上，我每行有 2 个帖子 (col-md-6)。网格工作正常并且所有内容都正确对齐，除非摘录或帖子标题比其他摘录或帖子标题长。在我的测试站点上，我的帖子的所有标题和摘录都只有 1 行，而我有 1 篇帖子的标题为一行，摘录为两行。由于摘录是两行，它与其余帖子的对齐方式相混淆。我该如何解决这个问题，以便无论摘录的长度如何，所有帖子都正确对齐？
我正在附上我的所有 php 文件，这些文件与我的搜索页面一起使用。但是，主文件是list-search-template.php（最后一个）
搜索.php
<?php get_header(); ?>
<div class="content-holder clearfix">
<div class="container">
<div class="search-results-search">
<form role="search" method="get" class="search-form-search form-inline-search" action="">
<div class="input-group-search">
<input type="search" value="" name="s" class="input-sm-search search-field-search form-control-search" placeholder="<?php echo $s ?>">
</div>
</form>
</div>
<div class="row">
<div class="col-md-12" >
<div class="grid js-masonry ajax-container row">
<?php
get_template_part("loop/loop-search"); ?>
</div>
<?php get_template_part('post-template/post-nav'); ?>
</div>
</div>
</div>
<footer class="footer">
<?php get_template_part('wrapper/wrapper-footer'); ?>
</footer>
<?php get_footer(); ?>循环搜索.php
<?php /* Loop Name: Loop list-posts blog */ ?>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
?>
<div id="post-<?php the_ID(); ?>" class="post-list_h ajax-post-wrapper block col-xs-12 col-sm-6 col-md-6" >
<?php
get_template_part('post-template/list-search-template');
?>
</div>
<?php
endwhile; wp_reset_postdata(); ?>
<?php else: ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>列表搜索模板.php
<?php
/**
* Grid post template
*/
?>
<?php
?>
<div class="post_content">
<div class="post_content grid-block <?php echo esc_attr(); ?>">
<?php if(has_post_thumbnail()) { ?>
<?php
if(has_post_format('video')){
$embed = get_post_meta(get_the_ID(), 'novablog_video_embed', true);
$vimeo = strpos($embed, "vimeo");
$youtube = strpos($embed, "youtu");
if($youtube !== false){
$video_id = str_replace( 'http://', '', $embed );
$video_id = str_replace( 'https://', '', $video_id );
$video_id = str_replace( 'www.youtube.com/watch?v=', '', $video_id );
$video_id = str_replace( 'youtube.com/watch?v=', '', $video_id );
$video_id = str_replace( 'youtu.be/', '', $video_id );
$video_id = str_replace( '&feature=channel', '', $video_id );
$link = '//www.youtube.com/embed/'.esc_attr($video_id);
}
if($vimeo !== false){
//Get ID from video url
$video_id = str_replace( 'http://vimeo.com/', '', $embed );
$video_id = str_replace( 'http://www.vimeo.com/', '', $video_id );
$video_id = str_replace( 'https://vimeo.com/', '', $video_id );
$link = '//player.vimeo.com/video/'.esc_attr($video_id);
}
}
?>
<?php if(has_post_format('video')){ ?>
<a class="popup-youtube" href="<?php echo esc_attr($link); ?>" title="<?php the_title_attribute(); ?>">
<?php if(has_post_format('video')){
echo '<div class="cover-video"></div>';
} ?>
<?php } ?>
<div class="two-front-container">
<a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></a>
</div>
<?php } ?>
</div>
<div>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<div class="post_content"><p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p><div class="clear"></div></div>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'includes/front-shop-the-post' ); ?>
<?php get_template_part( 'includes/share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</div>
</div>【问题讨论】：
-
如果可能，不要显示摘录，或者设置一个最小高度，以覆盖 2 行摘录。
-
我认为更简单的解决方案是将摘录字符数限制为一行，如果您想保留完整摘录，您可以从所有 div（col-md-6）中找到最高高度，然后设置所有“的默认高度” col-md-6" 来自使用 jquery
标签： php html twitter-bootstrap twitter-bootstrap-3 clearfix