Сетка начальной загрузки не правильно выравнивает

Question

Сетка начальной загрузки не правильно выравнивает

На моей странице результатов поиска у меня есть 2 сообщения в строке (col-md-6). Сетка работает нормально, и все выровнено правильно, за исключением случаев, когда выдержка или заголовок поста длиннее других выдержек или заголовков поста. На моем тестовом сайте у меня есть все заголовки и выдержки из моих постов в 1 строку, а затем у меня есть 1 пост, в котором заголовок поста состоит из одной строки и выдержки из двух строк. Так как отрывок состоит из двух строк, он портится с выравниванием остальных постов. Как я могу решить эту проблему, чтобы все сообщения независимо от длины выдержки были выровнены правильно?

Когда выдержки и заголовки постов имеют одинаковую длину, все выровнено

Когда выдержка длиннее, она портит выравнивание

Я прилагаю все мои файлы php, которые идут вместе с моей страницей поиска. Тем не менее, основным файлом является list-search-template.php (последний)

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

3

clearfix html php twitter-bootstrap twitter-bootstrap-3

Решение

Другие решения

Поскольку вы держите их все в одном ряду, четкого исправления нет. Поскольку у вас есть ширина 12 или 6 (полная или половина), вы можете закрыть (и открыть заново) новую строку в каждом другом сообщении. В тех случаях, когда это маленький экран, высота рядом друг с другом не имеет значения, так как каждый пост в любом случае будет на отдельной строке.

    <?php /* Loop Name: Loop list-posts blog */ ?>
<?php
if (have_posts()) :
$postCount = 0; // Initialize counter
while (have_posts()) : the_post();
$postCount++; // Increment counter
?>
<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
// Print row if needed
if($postCount % 2 == 0):
?>
</div><div class="grid js-masonry ajax-container row">
<?php
endif;
endwhile; wp_reset_postdata(); ?>

<?php else: ?>

<?php get_template_part( 'content', 'none' ); ?>

<?php endif; ?>

<!-- end snippet -->

0

Следующий код поможет вам правильно добавить строку после каждых 2 столбцов.

    <?php /* Loop Name: Loop list-posts blog */ ?>
<?php
if (have_posts()) :
$counter  = 0;
while (have_posts()) : the_post();
$post_count = $GLOBALS['wp_query']->post_count;

?>
<?php if($counter++%2==0){ ?>
<div class="row">
<?php } ?>
<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 if($counter%2==0 || $counter == $post_count){ ?>
</div>
<?php } ?>
<?php
endwhile; wp_reset_postdata(); ?>

<?php else: ?>

<?php get_template_part( 'content', 'none' ); ?>

<?php endif; ?>

Я думаю, что проблема с кнопкой загрузки больше будет из-за отсутствия тега закрытия div.

0

Есть очень простое решение. Вам необходимо выполнить 2 шага.

Удалить <div class="grid js-masonry ajax-container row"> из «search.php».

Отредактируйте «loop-search.php» с помощью приведенного ниже кода:

<?php /* Loop Name: Loop list-posts blog */ ?>
<?php
if (have_posts()) :
$cnt = 1;
$endRow = false;
while (have_posts()) : the_post();
?>
<?php
if($cnt%2 != 0){
$endRow = true;
?>
<div class="grid js-masonry ajax-container row">
<?php } ?>
<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
if($cnt%2 == 0){
$endRow = false;
?>
</div>
<?php } ?>
<?php
$cnt++;
endwhile; wp_reset_postdata(); ?>
<?php else: ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

0

Надлежащее решение этой проблемы — использовать свойство css. display:flex увидеть играть на скрипке

Но в вашем случае вы используете bootstrap, я думаю, что вы можете сделать, чтобы получить максимальную высоту div и применить ее ко всем div используя jquery, например:

jQuery(document).ready(function($){
var $divs = $('.row > div');
var highest = [];

$.each($divs, function($index, $item) {
highest.push($($item).height()); // Push all divs height into array
})

function compareNumbers(a, b) {
return b - a;
}

//console.log();
highest = highest.sort(compareNumbers); // sort Array

$('.row > div').height(highest[0]) // Apply the highest height to all divs

});

Посмотреть демо Вот

0

Дайте отрывок фиксированной высоты, используя css. Тогда, если текст доступен или нет. Это займет эту высоту.

0

Возможно, вы могли бы заставить иметь 1 строку заголовков и выдержки. Проверьте пример ниже.

.caption h3, .caption p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="thumbnail">
<img src="http://i68.tinypic.com/161z3fc.jpg" alt="" width="" height="">
<div class="caption">
<h3 title="Card 1 is not like the rest cards. It's title is longer than the others.">Card 1 is not like the rest cards. It's title is longer than the others.</h3>
<p>Short excerpt</p>
</div>
</div>
</div>

<div class="col-md-6">
<div class="thumbnail">
<img src="http://i68.tinypic.com/161z3fc.jpg" alt="" width="" height="">
<div class="caption">
<h3 title="Card 2">Card 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure dolor in reprehenderit in voluptate velit esse</p>
</div>
</div>
</div><div class="col-md-6">
<div class="thumbnail">
<img src="http://i68.tinypic.com/161z3fc.jpg" alt="" width="" height="">
<div class="caption">
<h3 title="Card 3">Card 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>

<div class="col-md-6">
<div class="thumbnail">
<img src="http://i68.tinypic.com/161z3fc.jpg" alt="" width="" height="">
<div class="caption">
<h3 title="Card 4">Card 4</h3>
<p>Another short excerpt</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

0

Источник

По вопросам рекламы [email protected]

Accepted Answer

Самый простой способ, который я нашел, чтобы решить это, это использовать clearfix, но с помощью Bootstrap’s отзывчивые утилиты использовать только clearfix в размерах окна просмотра вы хотите. Вам не нужно беспокоиться об открытии и закрытии rows.

Вот скриншот демонстрация JSFiddle:

Обратите внимание, что JSFiddle использует http://lorempixel.com/ для изображений, и они могут быть медленно загружаться иногда — дать ему время.

Чтобы реализовать это в своем коде, просто добавьте $count в loop-search.phpи включите clearfix каждый второй пост:

<?php /* Loop Name: Loop list-posts blog */

$count = 0;

if (have_posts()) :
while (have_posts()) : the_post();
$count++;
?>
<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 if ($count%2 === 0) { ?>
<div class="clearfix hidden-xs hidden-sm"></div>
<?php }
<?php endwhile; wp_reset_postdata(); ?>

<?php else: ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

clearfix не применяется для xs а также sm окна просмотра, поэтому вступает в силу только в md и больше — то, что вы хотите.

Примечание — у вас есть js-masonry классы в вашем коде, если вы действительно используете Masonry.js это, вероятно, испортит вещи. Может быть, вы экспериментировали с ним, вместо того чтобы пытаться заставить это горизонтальное выравнивание работать? Если вы не используете его сейчас, убедитесь, что вы удалили ссылки JS и удалите классы, чтобы избежать путаницы.

1