Question

我在wordpress页面中有一个包含2行的部分，第一行的布局是text |图像和第二行布局是文本|图片。我正在使用ACF来获取内容，并且我使用nth-last-of-type（even）和nth-last-of-type（odd）来使两行内容颠倒。我的问题是，该行中的图像需要切掉角，这也需要反转（对上一行向左切，对第二行向右切）

它应该是这样的： http://melindcooper.com/image1.jpg

我有切角工作，但是它在顶部和底部图像的同一位置剪切图像：

http://melindcooper.com/image2.jpg

这是我的代码：

     <?php
     $posts = get_posts(array(
 'posts_per_page'   => -1,
 'post_type'        => 'leaders',
 'orderby' => 'menu_order',
 'order' => 'ASC',
 'meta_key'     => 'show_on_home_page',
 'meta_value'   => 'yes'
 ));
      if( $posts ): ?>
      <?php foreach( $posts as $post ):
     setup_postdata( $post );

   <div class="zone5" style="background-color:#ccc; margin-bottom: 20px;">
<div style="width: 50%;">
    <p class="Stitle"><?php the_field('first_name'); ?> <?php the_field('last_name'); ?></p>
    <p class="staff"><?php the_field('title'); ?></p>
    <p class="staff"><?php the_field('bio'); ?></p>
</div>
<div style="width: 50%;" class="cutCorner">
    <img src="<?php the_field('photo'); ?>" />
</div>
</div>
 <?php endforeach; ?>
 <?php wp_reset_postdata(); ?>
 <?php endif; ?>

这是我的CSS：

.zone5:nth-last-of-type(odd) {
  display: -webkit-flex; /* Safari */
  -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
  display: flex;
  flex-direction: row-reverse; 
  }

 .zone5:nth-last-of-type(even) {
  display: -webkit-flex; /* Safari */
  -webkit-flex-direction: row; /* Safari 6.1+ */
  display: flex;
  flex-direction: row; 
  }

 .cutCorner {
   position:relative; 
   display: inline-block;
   }

  .cutCorner img {
    display:block;
   }
  .cutCorner:after {
  position:absolute; left:-2px; top:-2px; content:'';
  border-top: 400px solid #ccc;
  border-right: 250px solid transparent;
  }

这是我需要用于第二行图像的css：

//Bottom Image
 .cutCorner::after {
  position: absolute;
  right: -2px;
  top: -2px;
  content: '';
  border-top: 400px solid #ccc;
  border-left: 250px solid transparent;
  }

如何使用nth-last-of-type更改底部图像CSS？任何帮助，将不胜感激！

Answer 1

现在重新编写代码，您将在最后一个zone5 div上拥有lastitem类，在最后一个角落div上拥有lastcorner类。

您可以分别定位这些类

我已经测试了此代码，它适用于最后一个项目

<?php

$lastItem = '';
$lastCorner = '';

$posts = new WP_Query(array(
  'posts_per_page'   => -1,
  'post_type'        => 'leaders',
  'orderby' => 'menu_order',
  'order' => 'ASC',
  'meta_key'     => 'show_on_home_page',
  'meta_value'   => 'yes'
  ));

if ( $posts->have_posts() ) : while ( $posts->have_posts() ) : $posts->the_post();

if ($posts->current_post +1 == $posts->post_count) { 
  $lastItem = 'lastitem';
  $lastCorner = 'lastcorner';
}

?>
  <div class="zone5 <?php echo $lastItem; ?>" style="background-color:#ccc; margin-bottom: 20px;">
    <div style="width: 50%;">
      <p class="Stitle"><?php the_field('first_name'); ?> <?php the_field('last_name'); ?></p>
      <p class="staff"><?php the_field('title'); ?></p>
      <p class="staff"><?php the_field('bio'); ?></p>
    </div>
    <div style="width: 50%;" class="cutCorner <?php echo $lastCorner; ?>">
      <img src="<?php the_field('photo'); ?>" />
    </div>
  </div>
<?php endwhile; endif; wp_reset_postdata(); ?>

使用nth-last-child（odd）和（even）将CSS添加到图像

1 个答案: