Ir para conteúdo

POWERED BY:

Arquivado

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

lucas_hf

[Resolvido] com alinhamento

Por , em Desenvolvimento frontend

Recommended Posts

lucas_hf    0

lucas_hf
Postado

talvez isto seja uma pergunta demasiadamente simples, mas vamos la:

 

oque eu estou querendo fazer são dois boxes com um texto no meio, e que a distancia

entre os boxes varie de acordo com a configuração da tela do usuario, aumentando e diminuindo seu width

 

então fiz um box sem especificação de altura ou comprimento, com um padding, os dois boxes

com float 'left' e 'right' e o texto entre eles.

 

peguei somente a parte que interessa para esta duvida:

 

<!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=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="height:40px; padding:100px">
<div style="border:#000 solid; width:40px; width:40px; float:left">box 1</div>
um texto aqui um texto aqui um texto aqui 
<div style="border:#000 solid; width:40px; width:40px; float:right">box 1</div>
</div>
</body>
</html>

se voces testarem o codigo vão ver que funciona comforme oque eu disse (pelo menos aqui funcionou :rolleyes: )

porem se arrastarem a borda lateral do seu navegador criando uma janela bem estreita, vai ver que os boxes mudam de lugar

 

como eu faço para evitar que eles façam isso?

 

ps. espero ter explicado bem a duvida

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Uma idéia é definir um min-width... assim os box não vão mudar de lugar... já que vai criar um scroll qndo a janela chegar na largura mínima q você declarou para o elemento pai desses blocos e do texto.

 

Está 2 vezes ai, width: 40px... coloca uma vez só.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

codiicando o comnentário do William

 

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	.box {
		border:1px solid #000; 
		width:40px; 
		min-width:40px; 
	}
	
	.left {
		float: left;
	}
	
	.right {
		float: right;
	}
	
	.container {
		height:40px; 
		padding:100px; 
		min-width: 500px;
	}
</style>
</head>

<body>
<div class="container">
<div class="box left">box 1</div>
<div class="box right">box 1</div>
um texto aqui um texto aqui um texto aqui
</div>
</body>
</html>

abraço

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