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

您可以在 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>

Answer 3

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

这应该有效

foreach循环图像显示水平

3 个答案: