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

Question

I am looping the div horizontally with float:left and it works the way it should but the problem is each div has a unique height that is influenced by the content contained within, so the result can be messy looking when the browser is re sized. I would like for the php to loop once, break, then start a new row so that it looks the same no matter how the browser is sized.

If it's not already obvious, I am not good with php and struggled to piece together what I have.

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

If i understand what you want with the information i have here is what i suggest:

Your loop is fine. So lets say that you want it to look the same no mater the size of the page. For exemple : you want 5 div on each row. You could use css to do it.

You have a total of 10 div so you would need 2 rows.

add this to your loop :

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

This is very basic, the clear:right; CSS statement will prevent any other div to go to the right of the fifth div so it will start a new row;

You should probably add display:inline-block; to your css as well.

If this isnt working the way you want, an other option would be ta make each row inside a div with the same kind of if condition

exemple:

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

you might want to use a second increment that jump by five so with a bit of mat you can make something like

after that you just have to tweak the CSS row class.