Exibir dinamicamente o registro do banco de dados com a respectiva categoria

[Wagner Martins Bodyboard 0]

enho esse código html que separa as os registros do banco de dados de acordo com a categoria.

<div class="example1">
  <h1>Painel do Cliente</h1>
    <div class="panel panel-primary">
      <div class="panel-heading" data-acc-link="demo1"><i class="fa fa-check" aria-hidden="true"></i> Contabilidade</div>
      <div class="panel-body acc-open" data-acc-content="demo1">

        <div class="col-lg-4 pdf">
        <h4>Lorem Ipsium Lostes dewla</h4>
        </div>
        <div class="col-lg-4 pdf">
        <h4>Lorem Ipsium Lostes dewla</h4>
        </div>
        <div class="col-lg-4 pdf">
        <h4>Lorem Ipsium Lostes dewla</h4>
        </div>
        <div class="col-lg-4 pdf">
        <h4>Lorem Ipsium Lostes dewla</h4>
        </div>
        <div class="col-lg-4 pdf">
        <h4>Lorem Ipsium Lostes dewla</h4>
        </div>


       <div class="col-lg-12" style="height:40px;"></div> 

      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading" data-acc-link="demo2"><i class="fa fa-id-card" aria-hidden="true"></i> Setor Pessoal</div>
      <div class="panel-body" data-acc-content="demo2">
       <div class="col-lg-6 pdf">
        <h4>Lorem Ipsium Lostes dewla</h4>
        </div>
        <div class="col-lg-6 pdf">
        <h4>Lorem Ipsium Lostes dewla</h4>
        </div>
        <div class="col-lg-6 pdf">
        <h4>Lorem Ipsium Lostes dewla</h4>
        </div>
        <div class="col-lg-6 pdf">
        <h4>Lorem Ipsium Lostes dewla</h4>
        </div>
        <div class="col-lg-6 pdf">
        <h4>Lorem Ipsium Lostes dewla</h4>
        </div>
      <div class="col-lg-12" style="height:40px;"></div>
      </div>
</div>

Quero que o PHP busque no banco de dados e separe por categoria como no exemplo Html, estou usando o INNER JOIN do PHP/Mysql, mais não está certo, fica as divs ficam em cima da outra

<div class="example1">
			  <h1 class="pseudo_border_titulo">Painel do Cliente</h1>
              
         
              <?php
													  
echo $idUsuario;												  
$mysqli = new mysqli('localhost','root','xx', 'xx');

$sql = "SELECT categoria.id AS id_categoria, categoria.nome AS nome_categoria, categoria.pt AS pt_categoria, categoria.url AS url_categoria,
aruivos_clientes.id_usuario AS id_usuario, aruivos_clientes.nome_arquivo AS nome_arquivo, aruivos_clientes.id_categoria_arquivos AS id_categoria_arquivos, aruivos_clientes.data AS data
FROM categoria
INNER JOIN aruivos_clientes
ON categoria.id = aruivos_clientes.id_categoria_arquivos AND aruivos_clientes.id_usuario=$idUsuario 
ORDER BY nome_categoria, data";

$query = $mysqli->query( $sql )or die( $mysqli->error );

$prev_cat = '';
$nome_categ = array();
while( $dados = $query->fetch_object() )
{


if( $prev_cat!=$dados->nome_categoria )
{





 

$i_check++;
?>
<div class="panel panel-primary">   
  
<div class="panel-heading" data-acc-link="demo1"><i class="fa fa-check" aria-hidden="true"></i> <?php echo ''.utf8_encode($dados->nome_categoria).' ';?>
</div>
    <div class="panel-body acc-open" data-acc-content="demo1">                 
   											
<?php 
$prev_cat = $dados->nome_categoria;
}

?>
 
<div class="col-lg-4 pdf">
<h4><?php echo utf8_encode($dados->nome_arquivo); ?></h4>
</div>        
          
 
<?php


 }   ?>
        </div>      
  <div class="col-lg-12" style="height:40px;"></div>         
    </div>

 

[kkumayama 2]

da um print na sua tela e posta para vê como está ficando....

[Wagner Martins Bodyboard 0]

https://prnt.sc/gqj1ys o print está ai

[kkumayama 2]

O problema que está acontecendo se resolve com CSS.

Passa o CSS que você está usando....