Первые два элемента в моем контейнере 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, но верхний ряд всплывает. Пожалуйста помоги.
Задача ещё не решена.
Других решений пока нет …