How to seet how many DIV I want on a line

Question

I have an array containing strings in PHP.

I would like to display my strings in tables.

I would like to display them on "X" lines and 3 columns, so X lines of 3 divs elements containing strings.

I actually put it on a single DIV then I use a foreach, all my DIV's are on the same line.

Is there a simple way to force a return each 3 divs ?

Here is what I do actually :

<TABLE>     
<?php
foreach ($listeProfilProjets as $profilProjets)
{   
?><DIV>
    <TD>                    
        <TABLE id="drop-<?=$profilProjets['id'] ?>">
            <TR><TH><?=$profilProjets['prf_lib'] ?></TH><TH>Action</TH><TR>
            <TR><TD border=1> <input  class="destination" id="<?=$profilProjets['id'] ?>" ondragover="onDragOver(event)" ondrop="onDrop(event)" type="text" style="border: 1px solid;" value="Zone de dépôt"> </TD>
                <TR>
                    <?php foreach ($listeConsultantProfilProjets as $consutltantProfilProjets)
                    {
                        if ($consutltantProfilProjets['profil_projet_id'] == $profilProjets['id'])
                        {
                            echo '<TR><TD>' . $consutltantProfilProjets['con_nom'] . ' ' . $consutltantProfilProjets['con_prenom'] . '</TD>';
                    ?>   
                    <td>
                        <a class='delbtn' data-type='ConsultantProfilProjet' data-id=<?php echo $consutltantProfilProjets['id']; ?> href='javascript:void(0)'>Supprimer</a>
                    </td>
                </TR>
                <?php
                }
    } ?>

        </TABLE>
    </TD>
 </DIV>
 <?php
}
?>

Thanks

Answer 1

function createDiv(){

const div = document.createElement("div");
div.classList.add("element");
div.innerHTML = "loreum ipsum loreum ipsum loreum ipsum";
document.getElementById("struct").appendChild(div);
}

function pageScroll() {
    window.scrollBy(0,25);
}

.element{
border : 1px solid black;
width : 120px;
height : 60px;
padding : 5px;
}

#struct{
display: inline-grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: repeat(999,90px);
}

#btn{
font: 1.3em "Arial", sans-serif;
width : 140px;
height : 50px;
position : fixed;
bottom : 15px;
right : 15px;
background-color : white;
border : 1x solid black;
padding : 5px;
}

#btn:hover{
background-color : black;
color : white;
cursor : pointer;
}

<input type="button" onclick="createDiv();pageScroll()" value="Add new div" id="btn">

<div id = "struct">
  <div class = "element">
  loreum ipsum
  loreum ipsum 
  loreum ipsum
  </div>

  <div class = "element">
  loreum ipsum
  loreum ipsum 
  loreum ipsum
  </div>

  <div class = "element">
  loreum ipsum
  loreum ipsum 
  loreum ipsum
  </div>
  
</div>

I see you used the CSS tag in your question so what you can do is :

Styling your container where you generate your divs and apply the following property :

display : inline-grid

Then use grid-template-columns: 33% 33% 33% to set the number of column to 3. Here 33% is a totally arbitrary value, this is the width of the column.

If you want 4 divs per line you set grid-template-columns: 25% 25% 25% 25%,

If you want 5 divs per line you set grid-template-columns: 20% 20% 20% 20% 20%, etc...

But I suggest you use px instead of %.

Check this article for more informations. Best regards,

Hugo.