显示 3 列，每列按字母顺序阅读

Question

我买了一个wordpress模板，尝试修改品牌页面的代码显示3栏。以下是场景：

当前显示：

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

我想让显示器变成

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

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

代码：

<?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>

Answer 1

在你的代码中尝试删除

<div style="float:left; width:24%; margin-right:10px;">

替换成

<div style="float:left; width:32%; margin-right:11px;">

Answer 2

给你。您只需要在循环中进行一些计数和编辑。见代码中的 cmets -

<?php 
$count_partners = wp_count_posts('partner');
$count_posts = $count_partners->publish;
$i = 0;
//get the number of items for each column
$items_per_column = $count_posts/3;
if (($count_posts % 3) == 1) { $first_col = $items_per_column + 1;
                        $second_col = $items_per_column;
                        $third_col = $items_per_column;
} elseif (($i % 3) == 2) { $first_col = $items_per_column + 1;
                        $second_col = $items_per_column  + 1;
                        $third_col = $items_per_column;
} else {
    $first_col = $items_per_column;
    $second_col = $items_per_column;
    $third_col = $items_per_column;

}

if ($query->have_posts()) : while($query->have_posts()){
     $query->the_post(); 

        global  $post;
        $brandname = $post->post_title;
        $char = $brandname[0];
    if ( $i == 1) {//for the first item start a column div
        ?>
        <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();
        if ( $i == $first_col || $i == $second_col ) {
        //for first and second cols close the div and start the next
            ?>
            </div>
            <div style="float:left; width:24%; margin-right:10px;">

            <?php 
        }

        if ( $i == $third_col ) {
        //for the third col just close it up
            ?>
            </div>

            <?php 
        }

        $i++;
    } else: ?>
    <div>Alternate content</div>

已更新 - 稍微更改了语法并将计数器移到了 while 循环的末尾。

Answer 3

试试这个代码

$args = array(
    'post_type' => 'partner',
    'posts_per_page' => '-1',        
    '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 class='colm'>";
while($list->have_posts()): $list->the_post();
    global  $post;  

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


    if ($char !== $lastChar) {
                 //if($inc!=0){echo "</div>";}$inc++;

        if($inc%4==0){echo "</div><div class='colm'>";$inc=1;}
             $inc++;             
                 echo "<div style='padding:10px; background:red;
                        color:white; font-weight:bold;'>".
                     strtoupper($char)."</div>";

            $lastChar = $char;
    }  
    echo '<li><a href="'.$post->link.'" 
                 title="'.$post->post_title.'"
                 target="_BLANK"    >' .
         $brandname.$inc.'</a></li>';                        


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

    wp_reset_postdata();    

添加这个 CSS

.colm{
        float:left;
        margin: 10px;
        width: 30%;
    }

Answer 4

在一组垂直的 3 列中实现结果的加法是砌体 css 技术。这是我的最终结果：

<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;
}