Почему первые два элемента во flexbox действуют не так, как другие, с одним и тем же CSS

Первые два элемента в моем контейнере flexbox, содержащие мои сообщения из WordPress, плавают примерно на 10 пикселей выше, чем остальные. Все они имеют одинаковые CSS. Я использую PHP для получения сообщений из WordPress. Это только в верхнем ряду, что он делает это. Как вы можете видеть из фотографии, тот же шаблон и формат поста используются ниже на странице, и это не имеет этой проблемы. Пожалуйста помоги.

Я уже пробовал комментировать части кода, такие как кнопка «Читать далее» или значки, чтобы увидеть, возможно, поля или отступы внутри почтового контейнера делают это, но это не так. Я попытался установить высоту на контейнере flexbox равной 930px точной высоты, чтобы она не плавала — это не сработало. Это после того, как вы не установили поля для записей, но это все еще не сработало — раньше они были 5px.

Это HTML-шаблон для каждого сообщения в цикле сообщений, которое имеет стандартный формат сообщения. Каждый пост: стандарт и изображение следуют за css со «стандартом» в именах классов, а цитата и формат видео поста следуют за классами с «цитатой» в них.

 <article id="grid-post-<?php the_ID(); ?> " <?php post_class(); ?>>
<header class="grid-quote-entry-header">

<div class=" grid-quote-post-container">
<div class="grid-quote-icon-container">
<i class="fas fa-video"></i>
</div>

<div class="grid-standard-title-container">
<h2 class="grid-standard-title"><?php the_title(); ?></h2>
</div>

<div class="grid-standard-date-container">
<h5 class="grid-standard-date"><?php the_time('d/m/y'); ?></h5>
</div>

<div class=" grid-button" id="video-button">
<a href="<?php the_permalink(); ?>" class="btn"><button><?php _e('Read More');?></button></a>
</div>






</div>


</header>
</article>

ЗДЕСЬ ШАБЛОН ФОРМАТА ДЛЯ ВИДЕО И ЦИТАТЫ:

 <article id="grid-post-<?php the_ID(); ?> " <?php post_class(); ?>>
<header class="grid-quote-entry-header">

<div class=" grid-quote-post-container">
<div class="grid-quote-icon-container">
<i class="fas fa-video"></i>
</div>

<div class="grid-standard-title-container">
<h2 class="grid-standard-title"><?php the_title(); ?></h2>
</div>

<div class="grid-standard-date-container">
<h5 class="grid-standard-date"><?php the_time('d/m/y'); ?></h5>
</div>

<div class=" grid-button" id="video-button">
<a href="<?php the_permalink(); ?>" class="btn"><button><?php _e('Read More');?></button></a>
</div>






</div>


</header>
</article>

ЗДЕСЬ ИНДЕКС СТРАНИЦА

<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="grid-post-loop-container exhale-posts-container">
<div class="grid-whole-container">



<?php

if(have_posts() ):

echo '<div class="page-limit" data-page="/'. exhale_check_paged()
.'">';

while( have_posts() ): the_post();
get_template_part('template-parts/gridcontent', get_post_format()
);

endwhile;

echo '</div>';

endif;

?>

</div>

</div>




</main>
</div>

ЗДЕСЬ CSS:

 .grid-whole-container{
display: inline;
flex-wrap: wrap;
flex-direction: row;
width: 100%;



}

.grid-standard-post-container {
width: 32%;
flex: 100%;
height: 300px;
-webkit-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
float: left;



}

.grid-standard-post-container:hover {

}

.grid-standard-title-container {
width: 80%;
margin-left: auto;
margin-right: auto;

}

.grid-standard-title {
font-family: coolvetica;
text-transform: uppercase;
color: white;
text-align: center;
letter-spacing: 3px;
text-shadow: 2.5px 3px black;
font-size: 27px;
position: relative;
top: 80px;

}

.grid-standard-date-container {
width: 30%;
margin-left: auto;
margin-right: auto;

}

.grid-standard-date {
letter-spacing: 6px;
color: black;
font-family: coolvetica;
font-size: 13px;
text-align: center;
position: relative;
top: 60px;
}

.grid-button button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
position: relative;
top: 90px;
background: transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
font-family: coolvetica;
text-transform: uppercase;
color: white;
letter-spacing: 7px;

}

.grid-load-more {
margin-top: 100px;
}

/* INDEX GRID LAYOUT - QUOTE                  ========================================================================     ============================= */

.grid-quote-post-container {
width: 32%;
flex: 100%;
height: 300px;
-webkit-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
float: left;
background-color: #aecfd7;
}

.grid-quote-icon-container {
color: white;
font-size: 60px;
text-align: center;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: -70px;
}

Ожидается, что все эти div’ы будут действовать одинаково, так как все они имеют одинаковый css, но верхний ряд всплывает. Пожалуйста помоги.

Вот как это выглядит. Первые два не должны так всплывать

0

Решение

Задача ещё не решена.

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

Других решений пока нет …

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