我之前刚刚有一个关于这个脚本的问题，现在我又回来了，因为它是垂直显示的。
基本上，我想做的是每行显示三张照片，所以会有两行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张照片，并且可以工作，但输出如下：https://i.stack.imgur.com/xgTBW.png现在，很明显，我缩小了，因为我想给你看所有的图像。我试过float: left，但没有用。
有人有什么想法吗？我很乐意得到帮助。谢谢。：）
以下是我希望它如何运行的JSFiddlehttp://jsfiddle.net/GZb8A/
使用换行符<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>
<?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语句中关闭和打开您的标签，如：
<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>