如果class 1在左边，class 2在右边，我怎么说呢?

How do I say IF class #1 on left, if class #2 on right in loop

本文关键字：class 怎么说 左边 如果 右边      更新时间：2023-09-26

我在wordpress中有一个循环，它会吐出两个类。一个是班级照片，另一个是视频。一旦添加了新的照片或视频，它就会添加到最后一个div的下方。

Example:   
Photos  
Photos  
Video  
Photos  
Video

我需要做的是，我需要所有的照片在左边所有的视频在右边。我已经尝试使用Float:left和Float:right和clear:left;和clear:right;，它不像我计划的那样工作，因为div设置在50%。如果没有清除，它们按行依次是照片，照片，然后是新行，视频，照片。

我在想我可以使用一些PHP，说如果照片在这一列，如果视频在另一列。

我试了如下:

 .photos {
float: left;
width: 50%;
display: block;
clear: left;
 }
 .video {
float:right;
width:50%;
display: block;
clear:none;
 }

也:

.photos {
float: left;
width: 50%;
display: block;
clear: none;
 }
 .video {
float:right;
width:50%;
display: block;
clear:none;
 }

我只想让视频从右到左，照片从上到下。我不能在两个不同的DIV中分开它们，因为它们在一个循环中。

下面是数组:

<?php while (have_posts()) : the_post(); ?>
 <?php do_action( 'bp_before_blog_post' ); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="thumbl">
  <?php 
 if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
  the_post_thumbnail('thumbnail');
  } ?>
  </div>
  <div class="date"><?php printf( __( '%1$s', 'buddypress' ), get_the_date(), get_the_category_list( ', ' ) ); ?></div>
      <div class="post-content">
     <h2 class="posttitle"><a href="../../plugins/buddypress/bp-themes/bp-default/<?php the_permalink(); ?>" rel="bookmark" title="<?php _e( 'Permanent Link to', 'buddypress' ); ?> <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
  <div class="entry">
    <?php the_excerpt( __( 'Read the rest of this entry &rarr;', 'buddypress' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link"><p>' . __( 'Pages: ', 'buddypress' ), 'after' => '</p></div>', 'next_or_number' => 'number' ) ); ?>
 </div>
    </div>
  </div>
  <?php do_action( 'bp_after_blog_post' ); ?>
<?php endwhile; ?>
而我得到的代码例如只有: 
<div id="post-175" class="post-175 photos type-photos status-publish hentry category-media"></div>
<div id="post-176" class="post-175 photos type-photos status-publish hentry category-media"></div>
<div id="post-177" class="post-175 video type-photos status-publish hentry category-media"></div>
<div id="post-178" class="post-175 photos type-photos status-publish hentry category-media"></div>
<div id="post-179" class="post-175 video type-photos status-publish hentry category-media"></div>
<div id="post-180" class="post-175 photos type-photos status-publish hentry category-media"></div>

注意每个照片和视频的第二个类

为了回答我自己的问题，我找到了解决办法!!

将此代码置于循环

之上
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

把它放在div的下面，就在循环的外面

<div class="photodiv"><div></div></div>
 <script>$("div.photos").wrapAll($(".photodiv"));</script>

这将在任何具有。photos类的内容周围包装一个新的div，我可以将其浮动到左边!

如果我理解正确，照片在左边，视频在右边，这可能是一个解决方案:

<style>
.main {width:800px;}
.main > div >span {clear:both;float:left;}
.video {width:400px;float:right;"}
.photo {width:400px;float:left;"}
</style>
<div class="main">
    <div class="video">
        <span>Video1</span>
        <span>Video2</span>
    </div>
    <div class="photo">
        <span>Photos1</span>
        <span>Photos2</span>
        <span>Photos3</span>
    </div>
</div>

我要做的事情是1. 检查post类2. 如果post class = video，把它们放到video数组中，否则放到photos数组中3.现在我必须用照片和视频数组，我可以显示在任何我想要的地方看看这个

        <?php
        $photos = array();
        $videos = array();
        $post_class = array();
        ?>

        <?php while (have_posts()) : the_post(); ?>
         <?php do_action( 'bp_before_blog_post' ); ?>

            <?php 
            $post_class = get_post_class(); 
            if ( has_post_thumbnail() ) {
                $post_img = get_the_post_thumbnail($post->ID, 'thumbnail'); 
            }
            ?>

          <?php 
          if (strpos($post_class[0], 'photos')) {
                $photos[] = "<div id='{$post->ID}' class='{$post_class}>'
            <div class='thumbl'>
            {$post_img} 
            </div>
            <div class='date'>
            ". get_the_date() . "
            </div>
            <div class='post-content'>
             <h2 class='posttitle'>
                    <a href='../../plugins/buddypress/bp-themes/bp-default/". get_permalink() . "' rel='bookmark' title='" . the_title_attribute( 'echo=0' ) ."'>
                    " . get_the_title() . "
                    </a>
             </h2> 
             <div class='entry'>
            " . get_the_excerpt() . " 
            " . get_page_link($post->ID) . "
             </div>
            </div>
            </div>
          ";
          }
          if (strpos($post_class[0], 'video')){
                    $videos[] = "<div id='{$post->ID}' class='{$post_class}>'
            <div class='thumbl'>
            {$post_img} 
            </div>
            <div class='date'>
            ". get_the_date() . "
            </div>
            <div class='post-content'>
             <h2 class='posttitle'>
                    <a href='../../plugins/buddypress/bp-themes/bp-default/". get_permalink() . "' rel='bookmark' title='" . the_title_attribute( 'echo=0' ) ."'>
                    " . get_the_title() . "
                    </a>
             </h2> 
             <div class='entry'>
            " . get_the_excerpt() . " 
            " . get_page_link($post->ID) . "
             </div>
            </div>
            </div>
          ";
          }
          ?>

          <?php do_action( 'bp_after_blog_post' ); ?>
        <?php endwhile; ?>
        <?php /** now you hava separated the  videos and images so you can put them in different divs  outside the loop**/ ?>
        <div id="videos" style="width:50%; float:left;">
            <?php foreach ($photos as $photo) {
                echo $photo;
            } ?>
        </div>
        <div id="photos" style="width:50%; float:right;">
            <?php foreach ($videos as $video) {
                echo $video;
            } ?>
        </div>
http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail

http://codex.wordpress.org/Function_Reference/get_post_class

http://codex.wordpress.org/Function_Reference/get_the_excerpt

相关文章：