Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Pitag346

Propriedade Float

Por , em Desenvolvimento frontend

Recommended Posts

Pitag346    0

Pitag346
Postado

Boa tarde pessoal.

preciso da ajuda de vocês...

tenho um codigo, que faz o while e exibe os usuarios em uma pagina (equipe.php), e estou querendo adicionar um do lado do outro, tipo com duas colunas pra ficar um pouco melhor.

no caso está assim:

USER 1

USER 2

USER 3

USER 4

USER 5

Quero adicionar assim:

USER 1 USER 2

USER 3 USER 4

USER5

COM DUAS COLUNAS:

meu codigo está assim:

<?php
$con=mysqli_connect("mysql","USUARIO","SENHA","DB");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$sql="SELECT * FROM users";


?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- radioupper.com.br name="equipe" -->
<title>Equipe</title>
<style type="text/css">
body { margin-left: 0px; margin-top: 0px; }
</style>
<!-- radioupper.com.br -->
<!-- radioupper.com.br name="head" -->
<!-- radioupper.com.br -->
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">

<?php
// Executa a consulta OU mostra uma mensagem de erro
$resultado = $con->query($sql) OR trigger_error($con->error, E_USER_ERROR);
while ($user = $resultado->fetch_object()) {
?>
 <tr>
    <td><table width="600" border="0" cellspacing="4" cellpadding="0">
      <tr>
        <td width="96" rowspan="4"><img src="<?php echo $user->foto; ?>" width="80" height="85" /></td>
        <td width="182"></td>
        <td width="81"></td>
        <td width="221"></td>
      </tr>
      <tr>
        <td><font color="#E64946" face="Century Gothic" size="+3"><b><?php echo $user->nome; ?></b></font></td>
        
        
      </tr>
      <tr>
        <td><font color="#666666" face="Century Gothic" size="+2"><?php echo $user->cargo; ?></font></td>
        
      </tr>
      </table>
      <p> </p>
</body>
</html>
<?php
}
$resultado->free();
?>

e está exibindo um abaixo do outro, gostaria de adicionar um de cada lado, do jeito que demonstrei acima.

tentei usar a propriedade float, mas não consigui, não sei tbm se estou postando o topico no local correto, caso esteje errado, me desculpe!

obrigado desde ja!

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

reebr    94

reebr
Postado

Pode fazer sem float, usando display:inline-block:

<div class='equipe'>
    <div class='user'>USER1</div>
    <div class='user'>USER2</div>
    <div class='user'>USER3</div>
    <div class='user'>USER4</div>
    <div class='user'>USER5</div>
</div>

.equipe {
    text-align: center;
    width: 100%
}

.user {
    display: inline-block;
    width: 45%
}

DEMO

Compartilhar este post

Link para o post
Compartilhar em outros sites

h_felix    1

h_felix
Postado

Adapta seu codigo e exibe os valores dentro das div`s.

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .box{
                border: 1px solid red;
                width: 33%;
                float: left;
                box-sizing: border-box;
                margin-bottom: 15px;
            }
            .titulo{
                background: gray;
                color: #fff;
                text-align: center;
            }
            .texto{
                padding: 10px;
                
            }
            @media screen and (max-width: 850px) {
                .box {
                    width: 50%;
                }
            }
 
            @media screen and (max-width: 480px) {
                .box {
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="titulo">Titulo</div>
            <div class="texto">
                Lorem ipsum dolor sit amet, ne molestie incorrupte usu, quidam dissentiet appellantur in nam. Ad sit agam fugit commune, id oratio conceptam consectetuer vel.
            </div>
        </div>
        <div class="box">
            <div class="titulo">Titulo</div>
            <div class="texto">
                Lorem ipsum dolor sit amet, ne molestie incorrupte usu, quidam dissentiet appellantur in nam. Ad sit agam fugit commune, id oratio conceptam consectetuer vel.
            </div>
        </div>
        <div class="box">
            <div class="titulo">Titulo</div>
            <div class="texto">
                Lorem ipsum dolor sit amet, ne molestie incorrupte usu, quidam dissentiet appellantur in nam. Ad sit agam fugit commune, id oratio conceptam consectetuer vel.
            </div>
        </div>
        <div class="box">
            <div class="titulo">Titulo</div>
            <div class="texto">
                Lorem ipsum dolor sit amet, ne molestie incorrupte usu, quidam dissentiet appellantur in nam. Ad sit agam fugit commune, id oratio conceptam consectetuer vel.
            </div>
        </div>
        <div class="box">
            <div class="titulo">Titulo</div>
            <div class="texto">
                Lorem ipsum dolor sit amet, ne molestie incorrupte usu, quidam dissentiet appellantur in nam. Ad sit agam fugit commune, id oratio conceptam consectetuer vel.
            </div>
        </div>
    </body>
</html>

O melhor que dessa forma , o layout se ajusta com o layout da pagina . Fica muito bom o resultado.

 

Demo

 

fonte: http://forum.imasters.com.br/topic/530175-divs-responsivas-html/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pitag346    0

Pitag346
Postado

Pode fazer sem float, usando display:inline-block:

<div class='equipe'>
    <div class='user'>USER1</div>
    <div class='user'>USER2</div>
    <div class='user'>USER3</div>
    <div class='user'>USER4</div>
    <div class='user'>USER5</div>
</div>

.equipe {
    text-align: center;
    width: 100%
}

.user {
    display: inline-block;
    width: 45%
}

DEMO

 

 

Adapta seu codigo e exibe os valores dentro das div`s.

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .box{
                border: 1px solid red;
                width: 33%;
                float: left;
                box-sizing: border-box;
                margin-bottom: 15px;
            }
            .titulo{
                background: gray;
                color: #fff;
                text-align: center;
            }
            .texto{
                padding: 10px;
                
            }
            @media screen and (max-width: 850px) {
                .box {
                    width: 50%;
                }
            }
 
            @media screen and (max-width: 480px) {
                .box {
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="titulo">Titulo</div>
            <div class="texto">
                Lorem ipsum dolor sit amet, ne molestie incorrupte usu, quidam dissentiet appellantur in nam. Ad sit agam fugit commune, id oratio conceptam consectetuer vel.
            </div>
        </div>
        <div class="box">
            <div class="titulo">Titulo</div>
            <div class="texto">
                Lorem ipsum dolor sit amet, ne molestie incorrupte usu, quidam dissentiet appellantur in nam. Ad sit agam fugit commune, id oratio conceptam consectetuer vel.
            </div>
        </div>
        <div class="box">
            <div class="titulo">Titulo</div>
            <div class="texto">
                Lorem ipsum dolor sit amet, ne molestie incorrupte usu, quidam dissentiet appellantur in nam. Ad sit agam fugit commune, id oratio conceptam consectetuer vel.
            </div>
        </div>
        <div class="box">
            <div class="titulo">Titulo</div>
            <div class="texto">
                Lorem ipsum dolor sit amet, ne molestie incorrupte usu, quidam dissentiet appellantur in nam. Ad sit agam fugit commune, id oratio conceptam consectetuer vel.
            </div>
        </div>
        <div class="box">
            <div class="titulo">Titulo</div>
            <div class="texto">
                Lorem ipsum dolor sit amet, ne molestie incorrupte usu, quidam dissentiet appellantur in nam. Ad sit agam fugit commune, id oratio conceptam consectetuer vel.
            </div>
        </div>
    </body>
</html>

O melhor que dessa forma , o layout se ajusta com o layout da pagina . Fica muito bom o resultado.

 

Demo

 

fonte: http://forum.imasters.com.br/topic/530175-divs-responsivas-html/

 

não consegui adaptar ao meu codigo, poderiam aprofundar sobre isso!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pitag346    0

Pitag346
Postado

O que seria aprofundar? Usei duas regras para ser o mais simples possível.

não consigui adicionar ao meu codigo, pois estou ultilizando WHILE ... php

e não obtive exito!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pitag346    0

Pitag346
Postado

A formatação que o re2 te passou deveria funcionar corretamente, em temas de posicionamento fica igual você pediu, o que foi que não conseguiu adaptar? que problema apareceu?

 

não consegui adaptar no meu codigo... tenho pouco conhecimento em CSS...HTML

Compartilhar este post

Link para o post
Compartilhar em outros sites

h_felix    1

h_felix
Postado

 

não consegui adaptar no meu codigo... tenho pouco conhecimento em CSS...HTML

 

Aqui , adaptei o codigo , veja se resolve :

<?php
$con=mysqli_connect("mysql","USUARIO","SENHA","DB");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$sql="SELECT * FROM users";
?>
	<style>
            .box{
                border: 1px solid red;
                width: 33%;
                float: left;
                box-sizing: border-box;
                margin-bottom: 15px;
            }
            .titulo{
                background: gray;
                color: #fff;
                text-align: center;
            }
            .texto{
                padding: 10px;
                
            }
            @media screen and (max-width: 850px) {
                .box {
                    width: 50%;
                }
            }
 
            @media screen and (max-width: 480px) {
                .box {
                    width: 100%;
                }
            }
        </style>

<html>
    <head>
        <title>Seu Titulo Aqui</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
	<?php
	// Executa a consulta OU mostra uma mensagem de erro
	     $resultado = $con->query($sql) OR trigger_error($con->error, E_USER_ERROR);
		while ($user = $resultado->fetch_object()) {
	?>
			
        <div class="box">
            <div class="titulo">Usuario<?php echo $user->nome; ?></div>
            <div class="texto">
              <p><img src="<?php echo $user->foto; ?>" width="80" height="85" ></p>
			  <p>Cargo:<?php echo $user->cargo; ?></p>
            </div>
        </div>
		<?php
			}
		 $resultado->free();
		?>
		
    </body>
</html>

Qualquer coisa , só falar.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito