Jump to content
rafa-martin

div lado a lado dinamicamente

Recommended Posts

tenho algumas informações que preciso listar, dentre elas, imagens e suas respectivas descrições.

 

preciso listá-las em 2 colunas e 1 linha.

 

então na primeira coluna deve ter a imagem e ao lado (ao lado e não embaixo) deve ter sua descrição. mesma coisa para a segunda coluna.

 

como eu faria?

Share this post


Link to post
Share on other sites

Tecnologias usadas: HTML / CSS

<div style="clear: left; float: left"><img src="link-da-imagem" /></div>
<div style="clear: right; float: left">Texto...</div>

Resultado:

| - - - - - - - | - - - - - - - |
| img | Texto... |
|- - - - - - - - |- - - - - - - -|

Share this post


Link to post
Share on other sites

Movido de PHP -> CSS / XML / XHTML / HTML

Share this post


Link to post
Share on other sites

levinsk, é isso mesmo. Porém, se tiver mais que uma imagem no banco, as imagens e descrições tem que aparecer lado a lado. assim:

 

| - - - - - - - | - - - - - - - || - - - - - - - | - - - - - - - |
| img | Texto... || img | Texto... |
então se eu tiver 6 linhas na base, tem que mostrar dessa forma.
| - - - - - - - | - - - - - - - || - - - - - - - | - - - - - - - |
| img | Texto... || img | Texto... |
| - - - - - - - | - - - - - - - || - - - - - - - | - - - - - - - |
| img | Texto... || img | Texto... |
| - - - - - - - | - - - - - - - || - - - - - - - | - - - - - - - |
| img | Texto... || img | Texto... |
| - - - - - - - | - - - - - - - || - - - - - - - | - - - - - - - |
entendeu?

Share this post


Link to post
Share on other sites
Entendi "mizeravi"! ^^

Segue o código:

Tecnologias usadas: PHP, SQL, HTML, CSS
<?php

// Obter conteudos do banco de dados...

$cont = 0;
$total_conteudos = mysqli_num_rows($conteudos_bd);

/* Atenção: 
mysql_fetch_array foi removido na versão 7.0.0 do PHP
Deverá ser usado MySQLi ou PDO_MySQL
*/
    
while ($dados = mysqli_fetch_array($conteudos_bd)) {
    
  $cont++;
  
  /* O operador % retorna o resto da divisão por 2 */
  // se $cont %2 != 0 (temos um nº ímpar de colunas). Temos de criar uma nova linha.

  if($cont % 2 != 0) echo '<div id="linha" style="clear: both">';

  ?>

  <!-- cria uma coluna -->

  <div id="coluna" style="float: left">
    <div style="clear: both">
      <div style="float: left"><img src="<?php echo $dados["link-da-imagem"]; ?>" /></div>
      <div style="float: left"><?php echo $dados["texto"]; ?></div>
    </div>
  </div>

  <?php

  // se $cont %2 == 0 (temos um nº par de colunas). Temos de fechar a linha.
  /* se tivéssemos um nº ímpar de conteúdos a última linha não seria fechada,
     logo, temos de acrescentar a condição $cont == $total_conteudos
  */

  if($cont % 2 == 0  or $cont == $total_conteudos) echo '</div>';
 
} 

?>

 

Resultado:

| - - - - - - - - | - - - - - - - - || - - - - - - - | - - - - - - - -|
| img1 | texto1... || img2 | texto2... |
| - - - - - - - - | - - - - - - - -|| - - - - - - - | - - - - - - - - |
| img3 | texto3... || img4 | texto4... |
| - - - - - - - - | - - - - - - - || - - - - - - - | - - - - - - - - |
| img5 | texto5... || img6 | texto6... |
| - - - - - - - - | - - - - - - - - ||- - - - - - - - | - - - - - - - - |

E assim por diante...
Edited by Levinsk™

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.