在一个循环项中显示每两个数组项，并具有正确的位置

Question

我试图做一些与设计相适应的事情，所以我必须在一个循环中显示两个项目。此外，根据这一设计，应在每4循环行中断。行中断自动应用，但它是固定的4。所以，在4循环中，它实际上显示了8项。然而，我坚持的重点是:项目没有显示在我想要的位置。你可以看到我想做的更多细节在图片中的位置。

• 红色数字=当前放置
• 绿色数字=布局它应该是
• 黄色方框=表示循环项(8项)
• 黑匣子=数组中的项 (16项)

​

。

​

ul,li {
padding:0;
margin:0;
list-style:none;
}

li {
width:30px;
}
.gen {
  width: 140px
}

li {
  display: inline-block;
}

.ic {
  width: 100%
}

<ul class="gen">
  <li>
    <ul>
      <li class="ic">a</li>
      <li class="ic">b</li>
    </ul>
  </li>
  <li>
    <ul>
      <li class="ic">c</li>
      <li class="ic">d</li>
    </ul>
  </li>
  <li>
    <ul>
      <li class="ic">e</li>
      <li class="ic">f</li>
    </ul>
  </li>
  <li>
    <ul>
      <li class="ic">g</li>
      <li class="ic">h</li>
    </ul>
  </li>
  <li>
    <ul>
      <li class="ic">i</li>
      <li class="ic">j</li>
    </ul>
  </li>
  <li>
    <ul>
      <li class="ic">k</li>
      <li class="ic">l</li>
    </ul>
  </li>
  <li>
    <ul>
      <li class="ic">m</li>
      <li class="ic">n</li>
    </ul>
  </li>
  <li>
    <ul>
      <li class="ic">o</li>
      <li class="ic">p</li>
    </ul>
  </li>
</ul>

​

如您所见，项目不是按字母顺序从左到右放置的.

下面是我使用的循环：

// 16 items
$items = array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p'); 
$half = count($items) / 2;
$k = 0;

echo '<ul class="gen">';
for($i = 0; $i<$half; $i++) {
  echo '<li>';
  echo '<ul>';
  echo '<li class="ic">'.$items[$k].'</li>';
  echo '<li class="ic">'.$items[$k+1].'</li>';
  echo '</ul>';
  echo '</li>';
  $k = $k+2;
}
echo '</ul>';

Answer 1

我希望这能帮到你。您可以运行此代码并查看输出。

// chaganged the array to match your picture.
$items = array('1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16');
//used to format the output
echo "<pre>";
for ( $i = 0; $i<count($items) ; $i++ ) {
    echo "loop start \n";
    // access 1st item
    echo $items[$i]."\n";
    // based on your example, it seems that you need the item that is 4 places after the first item of the loop
    echo $items[$i+4]."\n";
    echo "loop end\n";
    // we can use mod to check if we have reached the 4th element (index 3), we use $i+1 to check the second element of the loop
    if ( ( $i+1 )%4 == 0 ) {
        echo "\n---new line---\n";
        $i = $i + 4;
    }
    echo "\n";
}
echo "</pre>";

Answer 2

假设您将处理格式设置，则可以将代码更改为：

$items = array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p'); 

for($first = 0; $first < count($items); $first += 8) {
    for($add = 0; $add < 4; $add++) {
        echo $items[$first + $add]; //first item
        echo $items[$first + $add + 4]; //second item
    }
}

Answer 3

我能看看你的HTML代码吗？这里有一个建议，像这样显示您的结果(运行代码片段并使用我的css和php循环)；

​

#wrapper{
 background-color:rgba(0,0,0,0.6);
 padding:10px;
}

.result{
 display:inline-block;
 padding:7px;
 border:3px solid #FEBF01;
 width:120px;
}

.result-child{
 display:block;
 padding:10px 10px;
 background-color:rgba(0,0,0,0.8);
 color:rgba(50,255,100,1);
 font-size:2em;
 text-align:right;
}

.result .result-child:first-of-type{
 margin-bottom:10px;
}

<div id="wrapper">
 <div class="result">
  <div class="result-child">1</div>
  <div class="result-child">1</div>
 </div>

 <div class="result">
  <div class="result-child">2</div>
  <div class="result-child">2</div>
 </div>
</div>

​

循环代码：

for($i = 0; $i<$half; $i++) {
  echo "<div class='result'>";
  echo "<div class='result-child'>".$items[$k]."</div>"; //first item
  echo "<div class='result-child'>".$items[$k+1]."</div>"; //second item
  echo "</div>";
  $k = $k+2;
}