ordinare elementi estratti con foreach

mi chedevo come si potesse ordinare gli elementi estratti con un ciclo foreach ...
per esempio :

<?php


    $i = 1;
    foreach ($friends["data"] as $value) {

       
        echo '<img src="https://example.com/' . $value["id"] . '/immagine"/>';
       
        if ($i == 15) {
            break;
        }
        $i++;
    }

?>

così facendo vengono estratte delle immagini (15) una sotto laltra...ma come farei a ordinarle in file da 5 una sotto l'altra?
con una tabella? ma mi fareste un esempio perchè non riesco ad arrivare a far funzionare il codice...

[alemoppo]

Potresti semplicemente agire via css.

Per le immagini, "normalmente" a me le lascia allineate.. e non le estrae "una sotto l'altra".

Invece, ad esempio i div li estrae "uno sotto l'altro". Per i div, potresti fare:

$i = 1; 
    foreach ($friends["data"] as $value) { 

        
        echo ' <div '.(($i % 5 != 0)?'style=float:left;"':'').'>contenuto</div>'; 
        
        if ($i == 15) { 
            break; 
        } 
        $i++; 
    } 

Ciao!

no , a me le immagini (con quel codice che ho linkato) le estrae una sotto l'altra...
forse dovrei dire che le immagini le printo all'interno di un div ... ma non mi sembra influente

[karl94]

La domanda non è inerente al PHP, il foglio di stile (CSS) è responsabile per l'aspetto grafico, dunque per il posizionamento degli elementi nella pagina.

Non ho capito però se vuoi che le immagini vengano disposte in ordine da sinistra a destra (cinque in tutto per riga) o se debbano riempire prima la prima colonna, poi la seconda, e cosi via.
Per intenderci:

1 2 3 4 5
6 7 8

oppure

1 3 5 7 8
2 4 6

Inoltre, se le immagini differiscono per grandezza, come devono venire sistemate?

grazie, dovrebbero venire sistemate secondo il tuo primo schema..da sinistra verso destra : 5 e poi a capo.
Per la seconda precisazione: non servirà ridimensionare niente, dato che le immagini estratte avranno tutte la medesima dimensione.

[karl94]

E per quanto riguarda la disposizione delle immagini lungo la riga? Devono essere posizionate come i caratteri in una riga di testo? E all'interno della medesima riga, come devono venire allineate verticalmente? Le vuoi separate o appiccate? Specifica il maggior numero di dettagli possibili.

sì , chiedo scusa.
Dovrebbero essere come i caratteri in una riga, separate tra loro di poco (circa mezzo centimetro) e "una sotto l'altra" ordinatamente.
grazie

[karl94]

Non hai risposto in merito all'allineamento verticale: le immagini di diverse altezze della medesima riga come dovrebbero essere allineate? Con il bordo inferiore in comune o quello superiore o il centro? Infine, per poterti dare direttamente le regole CSS è necessario sapere il selettore (o altre informazioni, come id o nome dell'elemento) che identifica in modo univoco l'elemento contenitore di tutte queste immagini.

avevo risposto in merito alle diverse altezze delle immagini dicendo che sono tutte della medesima altezza e larghezza ...l'elemento contenitore invece è il div con id="right-container"
grazie

[karl94]

Ops, vero, scusa, mi è sfuggito.
Prova così:

#right-container img{
	float: left;
	margin-right: 4em;/*Lascia a destra uno spazio pari a quattro volte la grandezza del testo*/
}

#right-container img:nth-child(5n+1){
	clear: left;
}

ringrazio per la risposta..
però non mi funziona..ho il div (right-container) che al suo interno ha le immagini che vengono printate grazie al foreach.
però le immagini continuano a essere "una sotto l'altra" sebbene io abbia aggiunto lo script che mi hai gentilmente preparato
Dovrei forse aggiungere un id anche alle immagini?