foreach 循环图像显示水平

Question

我刚才有一个关于这个脚本的问题，现在我又回来了，因为它是垂直显示的。

基本上，我想做的是每行显示三张照片，所以会有两排 3 张图片，总共 6 张图片。

<div class="4u">
  <article class="item"  style="float: left;">
    <?PHP foreach($photoData->data as $img){
    echo '<a href="'.$img->link.'?intent=like" target="_blank"><img src="'.$img->images->thumbnail->url.'"/></a>';
    echo '<header>'.$img->caption->text.'</header>';}
    ?>
  </article>
</div>

我正在构建的程序是一个 Instagram 抓取器，它可以从 Instagram 抓取我最近的 6 张照片，并且可以正常工作，但输出如下：http://i.stack.imgur.com/xgTBW.png 现在，很明显我缩小了，因为我想向你展示所有的图像。 我试过float: left，还是不行。

有人有什么想法吗？我很想得到帮助。谢谢你。 :)

这是一个 JSFiddle 我希望它如何去 http://jsfiddle.net/GZb8A/

Answer 1

使用换行符<br> 移动到新行，执行以下操作：

<article class="item"> // no styles

<?php
$column_count = 0;
foreach($photoData->data as $img) {
    $column_count++;

    // adjust width and height in styles to suit your content better
    <div class="instagram_item" style="width:200px; height:225px; text-align:center; display:inline-block; margin:0 10px 10px 0;">

        echo '<a href="'.$img->link.'?intent=like" target="_blank">';
            echo '<img src="'.$img->images->thumbnail->url.'"/>';
        echo '</a>';
        echo '<header>'.$img->caption->text.'</header>';

    </div>

    if ($column_count == 3) {
        $column_count = 0;
        echo '<br>';
    }
}
?>

</article>

Answer 2

<?PHP 
$counter = 0;
foreach($photoData->data as $img){
$counter++;
echo '<a href="'.$img->link.'?intent=like" target="_blank"><img src="'.$img->images->thumbnail->url.'"/></a>';
echo '<header>'.$img->caption->text.'</header>';
if ($counter == 3){
    echo "<br/>";
    $counter = 0;}
}?>

这应该可以工作

Answer 3

您可以在 foreach 语句中关闭和打开您的标签，例如：

<article class="item"  style="float: left;">
<?php
$count = 0;
foreach($photoData->data as $img) {
 $count++;
 echo '<a href="'.$img->link.'?intent=like" target="_blank"><img src="'.$img->images->thumbnail->url.'"/></a>';
 echo '<header>'.$img->caption->text.'</header>';
 if(count>3) {
  // close and open article
  ?>
  </article>
  <article class="item"  style="float: left;">
  <?php
  $count = 0; //Reset count to 0 edited by LJ_C
 }
}
?>
</article>