使用PHP for循环

Question

配售的图像序列中的Z字形顺序我在PHP初学者，我正在寻找你的指导，知道把图像序列中使用PHP循环Z字形顺序的可能性。

每次收到的图像数量可能会有所不同，所以img src代码被放置在一个foreach循环中，我现在让它们显示一个在另一个之下，但想知道是否有机会将它们放置在一个曲折的方式在图像以Z字形放置名义和形象附着

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

我正在寻找你的建议。

Answer 1

这真的只是CSS。把你的循环或将数据从循环，把它包装的元素中，而这个元素上，应用display: flex; flex-direction: column; align-items: flex-start，并使用:nth-child()选择到每个其他柔性孩子变成align-self: flex-end;

在你的循环，从而使改变这种文本和图像被包裹在一个元素中。

<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>