使用PHP for循环以锯齿形顺序放置图像序列 [英] Placing a sequence of images in zigzag order using PHP for loop

问题描述

我是PHP的初学者，我正在寻求您的指导，以了解使用PHP循环以锯齿形顺序放置图像序列的可能性.

I'm a beginner in PHP and I'm seeking your guidance to know the possibilities of placing a sequence of images in a zigzag order using PHP loop.

每次收到的图像数量可能会有所不同，因此img src代码放置在foreach循环中，我目前让它们在另一个下方显示，但想知道是否有机会将其放置在其中.锯齿状的图像作为附件

The number of images received may vary each time, so the img src code is placed in a foreach loop, I currently have them display one below the other but would like to know if there is an opportunity to place them in a zigzag manner as image attached

$j=0; 
 foreach ($data['employee'] as $teammember) {
echo $data['team']['members'][$j]['TeamRank'] . "." . $data['team']['members'][$j]['name'] ;
echo "<img src='http://yyyyyyy/employeeimage'" . $j . "'.png' />";
$j = $j + 1;
}

我正在征求您的建议，以将其名称和图像摆成锯齿形.

I'm seeking your advice in placing the name and image in zigzag form.

推荐答案

这实际上只是CSS.将循环或循环中的数据放在包装它的元素内，并在该元素上应用display: flex; flex-direction: column; align-items: flex-start，然后使用:nth-child()选择器将所有其他flex子元素更改为align-self: flex-end;

This is really just CSS. Put your loop or the data from the loop inside of an element that wraps it, and on that element, apply display: flex; flex-direction: column; align-items: flex-start, and use the :nth-child() selector to change every other flex child to align-self: flex-end;

在循环中，更改此设置，以便将文本和图像包裹在一个元素中.

In your loop, change this so that the text and image are wrapped in an element.

<div class="flex">
<?php
  $j=0; 
  foreach ($data['employee'] as $teammember) {
    echo '<div><p>' . $data['team']['members'][$j]['TeamRank'] . "." . $data['team']['members'][$j]['name'] . '</p>';
    echo "<img src='http://yyyyyyy/employeeimage'" . $j . "'.png' /></div>";
    $j = $j + 1;
  }
?>
</div>

并使用此CSS.

.flex {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 50vw;
  margin: auto;
}

.flex > div:nth-child(odd) {
  align-self: flex-end;
}

<div class="flex">
  <!-- your php code would go here, and just output a list of images -->
  <div>
    <p>text</p>
    <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
  </div>      
  <div>
    <p>text</p>
    <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
  </div>
  <div>
    <p>text</p>
    <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
  </div>
  <div>
    <p>text</p>
    <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
  </div>
  <div>
    <p>text</p>
    <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
  </div>
  <div>
    <p>text</p>
    <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
  </div>
</div>

这篇关于使用PHP for循环以锯齿形顺序放置图像序列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！