显示3列，按字母顺序向下读 [英] Display 3 columns to be read alphabetically down each column

问题描述

我购买了一个wordpress模板，并尝试修改品牌页面中的代码以显示3列.下面是场景:

I bought a wordpress template and try to modify the codes in the brand page to display 3 columns. below is the scenario:

当前显示:

a | b | c | d
e | f | g | h
i | j | k

我希望显示器变成

a | d | g 
b | e | h 
c | f | i

以下代码显示当前代码.谁能帮助我更正下面的代码以显示上述情况.

The codes below display the current one. Can anyone help me to correct the codes below to display the above scenario.

代码:

<?php
   $args = array(
    'post_type' => 'partner',
    'posts_per_page' => '-1',        
    'order'          => 'ASC',
    'post__not_in' => array( $post->ID )
   );

  // the query
  $query = new WP_Query( $args );

  // The Loop
     ?>
  <section class="recent-posts clear">
    <?php           
        $lastChar = ''; 
        $count_posts = wp_count_posts('partner')->publish;
        $i = 0;
    ?>
    <?php if ($query->have_posts()) : while($query->have_posts()) : $i++;
   if(($i % 3) == 0) : else : $query->the_post(); ?>
    <?php 
        global  $post;
        $brandname = $post->post_title;
        $char = $brandname[0];
    ?>
    <div style="float:left; width:24%; margin-right:10px;">
        <?php 
                if ($char !== $lastChar) {
                        if ($lastChar !== '')
                            echo '<br>';                        
                            echo "<div style='padding:10px; background:red;
 color:white; font-weight:bold;'>" .strtoupper($char)."</div>"; 
//print A / B / C etc
                            $lastChar = $char;
                }   
                echo $brandname; 
            ?>
        <?php the_content(); ?>
    </div>

    <?php endif; endwhile; else: ?>
    <div>Alternate content</div>
    <?php endif; ?>


  </section>

推荐答案

垂直添加到一组3列中的结果是砌体CSS技术.这是我的最终结果:

Addition to achieve the result in 3 columns in a group vertically is the masonry css technique. Here is my final result:

<div id="masonry-container" class="cols">
<?php      

$args = array(
'post_type' => 'partner',
'posts_per_page' => '-1',   
'orderby'=> 'title',     
'order'          => 'ASC',
'post__not_in' => array( $post->ID ));

$list = new WP_Query( $args );
$count_posts = wp_count_posts('partner');   
$lastChar = ''; 
$inc=1;

if ( $list->have_posts() ) :

    echo "<div style='colm'>";

    while($list->have_posts()): $list->the_post();

    global  $post;  

    $brandname = $post->post_title;
    $char = $brandname[0];                      

if ($char !== $lastChar) {                 

    if($inc%1 == 0) {echo "</div><div class='colm'>";}

        $inc++;            

        echo "<div style='padding:10px; background:red; color:white; font-weight:bold;'>".strtoupper($char)."</div>";
        echo "<br>";
        $lastChar = $char;
}  
    echo '<li><a href="'.$post->link.'" title="'.$post->post_title.'" target="_BLANK">' .$brandname.'</a></li>'; 

    endwhile;
    echo "</div>";
    endif;

wp_reset_postdata();   

?>
</div>

CSS

#masonry-container {
    width: 100%;
    max-width: 1200px;
    margin: 2em auto;
}

.cols {
   -moz-column-count:3;
   -moz-column-gap: 3%;
   -moz-column-width: 30%;
   -webkit-column-count:3;
   -webkit-column-gap: 3%;
   -webkit-column-width: 30%;
   column-count: 3;
   column-gap: 3%;
   column-width: 30%;
}

#contents .colm {
   margin:10px;
}
#contents .colm li{
   list-style: circle;
   margin-left:30px;
   line-height:25px;
}

这篇关于显示3列，按字母顺序向下读的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！