Ir para conteúdo

POWERED BY:

Arquivado

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

CripToGraFado

Alinhar varias Divs

Por , em Desenvolvimento frontend

Recommended Posts

CripToGraFado    0

CripToGraFado
Postado

Pessoal,

 

Eu já até comentei aqui no forum esse meu problema... Ai vai:

 

To querendo alinhar quatro div.. como sendo duas em uma linha em cima e duas em baixo... Mas quando eu mando o php exibir somente as 4... Elas ficam na mesma linha e estourando a div de fundo...

 

Olhem esse site: http://www.foconight.com

 

Na parte de "Eventos", tem dois, um do lado do outro... Eu quero colocar 4 sendo, dois em cima e dois em baixo....

 

Ou seja: Quero que quando chegar no final da div do fundo, ele pule para outra linha...

 

Será que é alguma função do "Display" ?!

 

Agradeço desde já!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ricardo Lima (Aram)    0

Ricardo Lima (Aram)
Postado

Para colocar um div do lado do outro eu uso o "float:left;" (as vezes right)Para o terceiro float não ficar do lado do segundo, uso "clear:left;" para começar uma nova linha de divs. se na parte de cima tiver divs com float left e right você tem que usar "clear :both;"

<html><head><style type="text/css"><!--#topo1 {	float:left;	border: 2px solid;}#topo2 {	float:left;	border: 2px solid;}#baixo1 {	clear:left;	float:left;	border: 2px solid;}#baixo2 {	float:left;	border: 2px solid;}--></style></head><body><div id="topo1">oi</div><div id="topo2">oi</div><div id="baixo1">oi</div><div id="baixo2">oi</div></body></html>

Daí é só ajustar as larguras ao gosto do fregues no cssO código acima funcionou no firefox 2.0. Coloquei o css junto com o html pra facilitar, mas você como bom desenvolvedor EH LOGICO que vai colocar em arquivos separados neh...

Compartilhar este post

Link para o post
Compartilhar em outros sites

CripToGraFado    0

CripToGraFado
Postado

Para colocar um div do lado do outro eu uso o "float:left;" (as vezes right)Para o terceiro float não ficar do lado do segundo, uso "clear:left;" para começar uma nova linha de divs. se na parte de cima tiver divs com float left e right você tem que usar "clear :both;"

<html><head><style type="text/css"><!--#topo1 {	float:left;	border: 2px solid;}#topo2 {	float:left;	border: 2px solid;}#baixo1 {	clear:left;	float:left;	border: 2px solid;}#baixo2 {	float:left;	border: 2px solid;}--></style></head><body><div id="topo1">oi</div><div id="topo2">oi</div><div id="baixo1">oi</div><div id="baixo2">oi</div></body></html>
Daí é só ajustar as larguras ao gosto do fregues no cssO código acima funcionou no firefox 2.0. Coloquei o css junto com o html pra facilitar, mas você como bom desenvolvedor EH LOGICO que vai colocar em arquivos separados neh...
Não da para usar esse sistema... :(Por que eu to fazendo o PHP dar um while. Entao ele vai repetir a mesma DIVQue eu saiba não da para colocar pra fazer outra div com o while...Mais alguma opnião?Alguem mais me ajuda?flw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Cara conselho de quem ja fez muito isso....Quando der esses problemas de alinhamento e tal... não tenta editar diretamente no php... pega esse código html gerado e trabalha em cima dele (só pra descobrir aonde está o erro).Se vai ver que se vai achar muito mais facilmente a solução dos seus problemas... e pelo que tava vendo (vi de relance viu) o php aee num ta influenciando em absolutamente nada.Me corriga se eu estiver errado... mas sempre que você ta puxando os dados do php se ta puxando pra dentro de um iframe... não diretamente para o código.Eu não entendi bem sua dúvida, mas espero ter ajudado.=]

Compartilhar este post

Link para o post
Compartilhar em outros sites

CripToGraFado    0

CripToGraFado
Postado

Cara conselho de quem ja fez muito isso....Quando der esses problemas de alinhamento e tal... não tenta editar diretamente no php... pega esse código html gerado e trabalha em cima dele (só pra descobrir aonde está o erro).Se vai ver que se vai achar muito mais facilmente a solução dos seus problemas... e pelo que tava vendo (vi de relance viu) o php aee num ta influenciando em absolutamente nada.Me corriga se eu estiver errado... mas sempre que você ta puxando os dados do php se ta puxando pra dentro de um iframe... não diretamente para o código.Eu não entendi bem sua dúvida, mas espero ter ajudado.=]

Sim... Realmente o PHP não ta influenciando em nada... Mas eu estou usando o while...Ele vai repetir o mesmo codigo soh que com outros dados...Até daria para fazer ele exibir cada um.. Mas ainda não descobrir! asUhASusPor isso que eu estou procurando alguma função do CSS que faça não estourar a div do fundo... Que quando chegasse ao final ele decia para outra linha...Valew ae

Compartilhar este post

Link para o post
Compartilhar em outros sites

CripToGraFado    0

CripToGraFado
Postado

Pessoal,

 

Fui testando varias coisas pra ve se funciona...

 

E finalmente CONSEGUI!!

 

Eu simplesmente coloquei um " display:table " :)

 

Ai vai o codigo:

 

<?php// conexao com o mysqlfunction conecta(){	mysql_connect("localhost","root","15846");	mysql_select_db("test") or die (mysql_error());}function desconecta(){	mysql_close();}conecta();function executa(){$sql = mysql_query("SELECT * FROM paginacao ORDER BY id") or die (mysql_error());while($coluna = mysql_fetch_array($sql)){	echo "<div id=\"img\">";		echo "<img src=\"".$coluna['url']."\">";	echo "</div>";}}?><html><head>	<title></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">div#fundo {	width:300px;	background:#eaeaea;	border:1px solid #333;}div#img {	display:inline;}</style></head><body><div id="fundo">	<?php executa(); ?></div></body><?php desconecta(); ?>

Falou pessoal

 

Agradeço quem ajudo ae ! (Y)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Obrigado por nos dizer como resolveu seu problema[]'s

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