0
我的問題是CSS樣式僅適用於第一個PHP循環迭代。 PHP循環輸出WordPress的帖子。我檢查了頁面結構，發現它的對象具有所需的結構（塊和類），但除第一個外，CSS不適用於它們。CSS樣式僅應用於第一個PHP循環迭代
<div id="events-feed">
<div class="container">
<div class="sym rose"></div>
<div class="title-wrapper">
<div class="title-wrap">
<div class="line"></div>
<div class="title">Наши события</div>
<div class="line"></div>
</div>
</div>
<?php
$args = array(
'posts_per_page'=> 5,
'orderby' => 'comment_count',
'category_name=events');
$q = new WP_Query($args);
if($q->have_posts()) {
while($q->have_posts()){ $q->next_post();
$post_id = $q->post->ID;
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post_id));
$title = get_the_title($post_id);
$date = get_the_date('d.m.Y', $post_id);
$content = get_post_field('post_content', $post_id);
?>
<div class="event-article">
<div class="events-post">
<div class="post-img" style="backgroung-image:url('$thumbnail[0]\')"></div>
<div class="post-header">
<?php echo $title; ?> </div>
<div class="post-date">
<div class="title-wrap">
<div class="line"></div>
<div class="title">
<?php echo $date; ?> </div>
<div class="line"></div>
</div>
</div>
</div>
<div class="desc">
<?php echo $content; ?>
</div>
</div>
</div>
</div>
<?php } } wp_reset_postdata(); ?>
的樣式& HTML是：
#events-feed {
background-color: #F9F6EB;
padding-top: 0.1px
}
#events-feed .title-wrapper {
padding: 20px 0;
position: relative;
text-align: center;
font-family: "PT Serif", serif;
padding: 0 50px;
margin-bottom: 65px
}
#events-feed .title-wrapper .title-wrap div {
display: inline-block;
vertical-align: middle
}
#events-feed .title-wrapper .title-wrap .line {
background: #0E0304;
height: 1px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: middle;
width: 15%;
z-index: 99
}
#events-feed .title-wrapper .title-wrap .title {
background-color: #F9F6EB;
color: #0E0304;
font-size: 40px;
padding: 0 20px;
text-transform: uppercase;
z-index: 999
}
#events-feed .event-article {
background-color: #fff;
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
color: #0E0304;
height: 1000px;
margin: 0 10% 100px;
text-align: center;
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-o-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)
}
#events-feed .event-article .events-post .post-img {
background-color: grey;
background-size: cover;
max-width: 2000px;
padding-top: 48%
}
#events-feed .event-article .events-post .post-header {
margin-top: 40px;
font-size: 34px;
text-transform: uppercase
}
#events-feed .event-article .events-post .post-date {
padding: 20px 0;
position: relative;
text-align: center;
margin-bottom: 30px
}
#events-feed .event-article .events-post .post-date .title-wrap div {
display: inline-block;
vertical-align: middle
}
#events-feed .event-article .events-post .post-date .title-wrap .line {
background: #7D8082;
height: 1px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: middle;
width: 15%;
z-index: 99
}
#events-feed .event-article .events-post .post-date .title-wrap .title {
background-color: #fff;
color: #7D8082;
font-size: 20px;
padding: 0 20px;
text-transform: capitalize;
z-index: 999
}
#events-feed .event-article .desc {
font-size: 20px;
margin: 0 50px
}
#events-feed .event-article .desc p {
margin-bottom: 27px
}
#events-feed .event-article .desc ul {
margin: 0 0 27px 40px;
text-align: left
}
.line {
height: 1px
}<div id="events-feed" style="margin-top: 160px;">
<div class="container">
<div class="sym rose"></div>
<div class="title-wrapper">
<div class="title-wrap">
<div class="line"></div>
<div class="title">Наши события</div>
<div class="line"></div>
</div>
</div>
<div class="event-article">
<div class="events-post">
<div class="post-img" style="backgroung-image:url('$thumbnail[0]\')"></div>
<div class="post-header"> День рождения ElRumbo </div>
<div class="post-date">
<div class="title-wrap">
<div class="line"></div>
<div class="title"> 18.08.2015 </div>
<div class="line"></div>
</div>
</div>
</div>
<div class="desc">
18.08.2015 мы празднуем день рождения! В этот день с 19:00 мы принимаем гостей только по предзаказу столика. И подарки будем дарить мы!
<ul>
<li>Праздничная лотерея</li>
<li>Скидка 20%</li>
<li>Бокал вина в подарок каждому</li>
</ul>
В 21:45 фаер-шоу от творческой группы "FaBula" Будем рады быть вместе с вами в наш праздничный вечер!
<strong>Подробности при заказе столика.</strong>
</div>
</div>
</div>
</div>
<div class="event-article">
<div class="events-post">
<div class="post-img" style="backgroung-image:url('$thumbnail[0]\')"></div>
<div class="post-header"> День святого Валентина </div>
<div class="post-date">
<div class="title-wrap">
<div class="line"></div>
<div class="title"> 14.02.2016 </div>
<div class="line"></div>
</div>
</div>
</div>
<div class="desc">
Dias de los Enamorados 14 февраля - День Святого Валентина В этот вечер по предзаказу столика вас ждут:
<ul>
<li>Скидка 20% на коктейли группы "Мартини"</li>
<li>Праздничная лотерея</li>
<li>Особый коктейль, которого нет в меню</li>
</ul>
</div>
</div>
你能否包含你的CSS和你的代碼生成的相關HTML？請參閱：[如何創建一個最小，完整和可驗證的示例]（https://stackoverflow.com/help/mcve） – FluffyKitten
當然，感謝您的關注！ –