exibir imagens lado a lado e nome embaixo de cada uma - css?

[salazardeaguiar 0]

Olá! Tenho um fórum phpBB e nele porto uma extensão chamada Reputação, que é semelhante ao curtir do facebook. Pois bem, esse aplicativo exibe na página inicial lista dos 5 mais reputados do forum. Eu consegui fazer um script em php para exibir os avatares dos usuários mais reputados na frente do seus nomes de usuário e numero de reputações, porém, preciso formatar para que fique do jeito que eu quero.

Aí é que está o problema, eu não entendo muito de CSS.
Eu queria que a lista ficasse assim:

Primeiro o avatar do usuário.
Embaixo dele o nome de usuário
embaixo do nome de usu[ario o número de reputações do usuário

E isso se repete com todos os usuários, um ao lado do outro.... fiz imagens ilustrativas de como é e como eu quero

 

COMO É ATUALMENTE

 

COMO EU DESEJO

Aqui os arquivos HTML para vocês darem uma olhada, que classes css devo usar?

 

 

<!-- IF S_RS_TOPLIST -->
    <div class="stat-block reputation-toplist">
        <h3>{L_RS_TOPLIST}</h3>
        <p>{L_RS_TOPLIST_EXPLAIN}{L_COLON}
            <!-- IF .toplist -->
                <strong>
                <!-- BEGIN toplist -->
                    <div class="todaystatsrep"><!-- IF toplist.S_DIRECTION and toplist.S_FIRST_ROW -->{L_RS_NEW_LINE}<!-- ENDIF -->
                    <!-- IF toplist.HAS_AVATAR --><img src="{toplist.USER_AVATAR}" alt="" height="40px" /><!-- ELSE -->
                    <img src="{T_THEME_PATH}/images/no_avatar.gif" alt="" height="40px" /><!-- ENDIF --> {toplist.USERNAME_FULL}
                    (<!-- IF S_VIEW_REPUTATION --><a href="{toplist.U_VIEW_USER_REPUTATION}"><!-- ENDIF -->{toplist.USER_REPUTATION}<!-- IF S_VIEW_REPUTATION --></a><!-- ENDIF -->)<!-- IF toplist.S_DIRECTION and not toplist.S_LAST_ROW -->{L_RS_NEW_LINE}<!-- ELSE IF not toplist.S_LAST_ROW -->{L_COMMA_SEPARATOR}<!-- ENDIF -->
                </div><!-- END toplist -->
                </strong>
            <!-- ELSE -->
                {L_RS_NO_USERS}
            <!-- ENDIF -->
        </p>
    </div>
<!-- ENDIF -->

 

Explicação:

 

<!-- IF toplist.HAS_AVATAR --><img src="{toplist.USER_AVATAR}" alt="" height="40px" /><!-- ELSE -->
<img src="{T_THEME_PATH}/images/no_avatar.gif" alt="" height="40px" /><!-- ENDIF --> Essa parte é o avatar dos reputados

 

toplist.USERNAME_FULL} Essa parte é o nome de usuario

 

(<!-- IF S_VIEW_REPUTATION --><a href="{toplist.U_VIEW_USER_REPUTATION}"><!-- ENDIF -->{toplist.USER_REPUTATION}<!-- IF S_VIEW_REPUTATION --></a><!-- ENDIF -->) Essa parte é o numero de reputação do usuario

[L. Henrique 179]

Englobe no HTML, os usuários por uma div com classe wrapper (ou qualquer outro nome que preferir).

Ex.:

<div class="wrapper">
   <div class="foto_usuario">
      <h2>Nome
         <p><small>Qtd</small></p>
      </h2>
   </div>
</div>

Feito isso, você precisa definir no wrapper seu estilo dentro do CSS e para fazer aparecer em uma única linha (com quebra, claro), você precisa definir um display: inline-block;

Ex.:

.wrapper{
   width: 30px;
   height: 30px;
   display: inline-block;
}

O inline-block, como o próprio elemento diz, pega todas as divs que possuem essa classe e as deixam em uma única linha.

Caso queira conferir um exemplo de como isso funciona, segue aqui a DEMO.

[salazardeaguiar 0]

Englobe no HTML, os usuários por uma div com classe wrapper (ou qualquer outro nome que preferir).

 

Ex.:

<div class="wrapper">
   <div class="foto_usuario">
      <h2>Nome
         <p><small>Qtd</small></p>
      </h2>
   </div>
</div>

Feito isso, você precisa definir no wrapper seu estilo dentro do CSS e para fazer aparecer em uma única linha (com quebra, claro), você precisa definir um display: inline-block;

 

Ex.:

.wrapper{
   width: 30px;
   height: 30px;
   display: inline-block;
}

O inline-block, como o próprio elemento diz, pega todas as divs que possuem essa classe e as deixam em uma única linha.

 

Caso queira conferir um exemplo de como isso funciona, segue aqui a DEMO.

obrigado pela ajuda :)

 

eu testei e ficou um abaixo do outro :( a foto em cima, o nome embaixo e a quantidade tbm embaixo, porém não lado a lado