Question

我的问题是CSS样式仅适用于第一个PHP循环迭代。 PHP循环输出Wordpress帖子。我已经检查了页面结构，发现它的对象具有所需的结构（块和类），但除了第一个之外，CSS不适用于它们。

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

风格＆amp; 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(&#39;$thumbnail[0]\&#39;)"></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(&#39;$thumbnail[0]\&#39;)"></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>

Answer 1

感谢FlyffyKitten先生或夫人，我找到了解决方案：我必须将至少两个结束标记移出循环，因为它们引用了循环对象的父元素。很抱歉打扰了所有人。谢谢你的帮助！

CSS样式仅适用于第一个PHP循环迭代

1 个答案: