显示行和列中帖子的缩略图

Question

你好我想以网格状的方式显示我的缩略图。我瞄准的标记是 由于我的编码意识不强，我无法制作最后一栏

<div class="col">
                <div class="logo"><img src="img/real/bmd.png" alt=""></div>
                <div class="logo"><img src="img/real/bn24.png" alt=""></div>
                <div class="logo"><img src="img/real/brocode.png" alt=""></div>

            </div>
            <div class="col">
                <div class="logo"><img src="img/real/ck.png" alt=""></div>
                <div class="logo"><img src="img/real/etop.png" alt=""></div>
                <div class="logo"><img src="img/real/etv.png" alt=""></div>

            </div>
            <div class="col">
                <div class="logo"><img src="img/real/ltw.png" alt=""></div>
                <div class="logo"><img src="img/real/mdb.png" alt=""></div>

            </div>

但是我无法在wordpress中生成这个标记。这是我尝试过的     

$published_posts = $count_posts->publish;

$j= $published_posts/3;
$check =ceil($j);

for ($i=0;$i<$check;$i++)
{
echo '<div class="col">';

if($check>$j)
{   
    $again_check=$i+2;
    if($again_check>$check)
    {
        for ($k=0;$k<3;$k++)    
        {
            echo '<div class="logo"><img src="get_the_post_thumbnail()"> </div>';
        }
    }
    else
    {
        if(($j%3)==2)
        {
            echo '<div class="logo"><img src="get_the_post_thumbnail()"></div>';
            echo '<div class="logo"><img src="get_the_post_thumbnail()"></div>';
        }
        else
        {   
            echo '<div class="logo"><img src="get_the_post_thumbnail()"></div>';
        }               
    }
}
else
{
    for ($k=0;$k<3;$k++)    
    {
        echo '<div class="logo"><img src="get_the_post_thumbnail()"></div>';
    }
}   



echo '</div>';
}

?>

我需要一个视图，缩略图将以3行显示，列数会有所不同。我怎样才能做到这一点？

Answer 1

之前我的模板中有相同的情况。我想制作一个网格布局，而不会弄乱身高......

我提出了这个解决方案

http://jsfiddle.net/rahulrulez/4CrU6/

在这里，我把计数器放入for循环中。对于每个第6个元素，即ctr % 6 == 0，我插入了

<div class="clearfix"></div>以确保下一行元素尽管图像高度很高，但仍然在下一行。我已经在jsfiddle中演示了它。

计数器和clearfix的逻辑框架

echo '<div class="row"> <div class="container">';

for(i=0;i<$check;i++)
{
   //PUT IMAGE MARKUP HERE
     echo '<div class="col-md-2 col-sm-2"><img src="http://placehold.it/100x100" /></div>';

   if(i % 6 == 0){ //6 is number of elements you want in each row
     echo '<div class="clearfix"></div>'
   }

}
echo '</div> </div>';

请参考我在jsfiddle中给出的标记。

此致

Rahul Patil。