如何使这个循环一次，中断然后继续循环？

Question

我正在使用 float:left 水平循环 div，它按应有的方式工作，但问题是每个 div 都有一个独特的高度，该高度受其中包含的内容的影响，因此当浏览器运行时，结果可能看起来很混乱重新调整大小。我希望 php 循环一次，中断，然后开始一个新行，这样无论浏览器的大小如何，它看起来都一样。

如果还不是很明显，我不擅长 php 并且努力拼凑我所拥有的。

<?php
$url = "XML.php";
$xml = simplexml_load_file($url);
$namespaces = $xml->getNamespaces(true); // get namespaces
for($i = 0; $i < 10; $i++){

    $poster = $xml->channel->item[$i]->children($namespaces['x'])->poster;
    $html .= "<div class='wrapper' style='float:left;'>$poster</div>";}

echo $html;
?>

Answer 1

如果我了解您想要的信息，我在这里的信息就是我的建议：

你的循环很好。因此，可以说无论页面大小如何，您都希望它看起来相同。例如：您希望每行有 5 个 div。你可以使用 css 来做到这一点。

你总共有 10 个 div，所以你需要 2 行。

将此添加到您的循环中：

if($i = 5){
$html .= "<div class='wrapper' style='float:left;clear:right;'>$poster</div>";}
}
else{
$html .= "<div class='wrapper' style='float:left'>$poster</div>";}
}

这是非常基本的，clear:right; CSS 语句将阻止任何其他 div 转到第五个 div 的右侧，因此它将开始一个新行；

您可能也应该将 display:inline-block; 添加到您的 css 中。

如果这不按您想要的方式工作，另一种选择是让 div 内的每一行都具有相同的 if 条件

示例：

html.= '<div class="row">'; // start the row here
 if($i = 5){
 // You might want to use another increment to keep track of the row
 //  because in this case you would only make 2 rows.
    $html .= '</div><div class="row">'; // end the first row and start a new one
    }
    else{
    // we do nothing
    }
html.= '</div>'; //end the row here

你可能想使用一个跳五的第二个增量，所以你可以用一点垫子做类似的东西

之后，您只需调整 CSS 行类。