Ir para conteúdo

Arquivado

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

Beraldo

[Resolvido] Manter DIVs lado a lado

Por , em Desenvolvimento frontend

Recommended Posts

Beraldo    864

Beraldo
Postado

Eu tenho um DIV principal, com diversas DIVs dentro dela, que correspondem a resultados de uma busca. Cada DIV do resultado possui duas DIVs: uma para a foto e outra para o texto. Parece confuso, mas não é. :P

 

Um exemplo:

<html>
<head>
<title>Teste</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style type="text/css">
#tudo
{
	width: 600px;
}

.elemento
{
	width: 400px;
	border: solid 1px red;
	margin: 30px;
	padding: 10px;
}

.foto
{
	width: 120px;
	border: solid 2px green;
}

.texto
{
	width: 120px;
	border: solid 1px blue;
}
</style>

</head>

<body>

<div id="tudo">

  <div class="elemento">
	<div class="foto">
	FOTO
	</div>
	<div class="texto">
	TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
	</div>
  </div>

  <div class="elemento">
	<div class="foto">
	FOTO
	</div>
	<div class="texto">
	TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
	</div>
  </div>
  
  <div class="elemento">
	<div class="foto">
	FOTO
	</div>
	<div class="texto">
	TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
	</div>
  </div>
</div>

</body>
</html>

 

 

O problema é que a div do texto fica abaixo da div da foto. Quero que elas fiquem lado a lado.

 

Tentei colocar float: left na div da foto, mas isso desconfigura tudo. O texto fica em cima da foto, a div do resultado de baixo sobe... confusão totoal.

 

Resumindo: atualmente está assim:

 

foto
texto



foto
texto

O que eu quero é isto:

foto |  texto texto
		  texto texto



foto | texto texto
		 texto texto

Detalhe: Como no exemplo acima, não quero que o texto invada o espaço da imagem, mesmo que esse espaço esteja vazio. Ou seja, não quero que ocorra isto:

foto | texto texto
texto texto

 

A resposta deve ser simples, mas sou péssimo Web Designer... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif :rolleyes: http://forum.imasters.com.br/public/style_emoticons/default/ninja.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tá super simples ^^

Essa é minha área :lol:

 

Joga um float: right no texto, e um left na foto.

você poderia economizar divs.. fazendo por exemplo:

.elemento img {}

em vez de atribuir uma div com uma classe para a imagem.

 

http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Cada grupo foto/texto, só vai ter uma foto certo? e você vai inserir com um <img> ne?!

fica perfeito se você fizer .elemento img {} ^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tem como postar um exemplo mais concreto?

.foto
{
	width: 120px;
	border: solid 2px green;
	float: left;
}

.texto
{
	float: right;
	width: 120px;
	border: solid 1px blue;
}
Não vi erros com esse arquivo que você passou...

bastaria aumentar o width do .texto...

 

Para truncar o texto, você adicionaria um overflow:hidden no .elemento, mas acho que você não quer isso..

faça os .elemento serem espansíveis ne?!... min-height... e max-height variável..(só não declarar)

 

Ah é.. me esqueci que o float retira o elemento do fluxo.. veja:

hr {
	clear: both;
	border: 1px solid #fff;
}
E adicione esse hr no fim dos floats:

<div class="elemento">
	<div class="foto">
	FOTO
	</div>
	<div class="texto">
	TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
	</div>
	<hr />
  </div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

A idéia não é bem essa não Beraldo.. veja que se você adicionar na classe .elemento, você vai perder o conteudo dela.. pois ela está vazia ainda...

 

testa no firefox.. que com o esquema das bordas que você fez, fica bem visível...

coloque o hr como sugeri, e veja a diferença.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Beraldo    864

Beraldo
Postado

última coisa: há como manter a div texto ao lado da foto, sem ter aquele espaço enorme?

float right joga o texto lá para a direita. EU teria de fazer uma mergem à esquerda, mas isso empurraria o texto para a esquerda.

 

 

edit

 

falei besteira. é só arrumar as dimensões da div... http://forum.imasters.com.br/public/style_emoticons/default/ninja.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

edit

 

falei besteira. é só arrumar as dimensões da div... http://forum.imasters.com.br/public/style_emoticons/default/ninja.gif

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif [Resolvido] :unsure: ?

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