Ir para conteúdo
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?

Compartilhar este post


Link para o post
Compartilhar em outros 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... |
|- - - - - - - - |- - - - - - - -|

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros 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...
Editado por Levinsk™

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.