горизонтальное отображение цикла foreach

0

У меня только был предыдущий вопрос об этом скрипте, и теперь я вернулся, потому что он отображается вертикально.

В принципе, то, что я хочу сделать, это отобразить три фотографии в строке, поэтому будет два ряда из 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, который извлекает 6 моих последних фотографий из Instagram и работает, но здесь вывод: http://i.stack.imgur.com/xgTBW.png Теперь, очевидно, я увеличил масштаб потому что я хотел показать вам все изображения. Я пробовал float: left, и это не сработало.

У кого-нибудь есть идеи? Мне бы очень хотелось помочь. Спасибо. :)

Здесь JSFiddle того, как мне хотелось бы поехать http://jsfiddle.net/GZb8A/

  • 0
    Добавьте счетчик и оператор if. Если счетчик достигает 3, добавьте <br/> и сбросьте счетчик до 0 или 1, как бы вы ни хотели начать
  • 0
    Попробуйте опубликовать свой CSS и, если возможно, создать JSFiddle .
Показать ещё 2 комментария
Теги:
foreach
instagram

3 ответа

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>
Поделиться
  • 0
    Это так же, как у меня :) хе-хе
  • 0
    @ ЖЖ-С Добавлено одновременно, приятно!
Показать ещё 4 комментария
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>
Поделиться
  • 0
    ваш счетчик выключен, во втором раунде ваш счетчик будет считать = 2 на первом круге, вам нужно установить его на 0
0 
<?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;}
}?>

Это должно работать

Поделиться
  • 0
    Хаха спасибо. :)
  • 0
    Это просто отображает те же 6 изображений под первым набором изображений. : l Неважно, исправил это.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню