Texto um na esquerda e outro na mesma linha direita

[TeixeiraRamos 4]

Gostaria de colocar o texto assim:

Produção ano 2017                                                              Setor B

 

 

<div class="div-texto-producao">
			<h1 align="left" class="titulo-cor-diferente">Produção ano 2017</h1>  
		</div>

Na mesma linha,  horizontalmente , mas na direita    Setor B não está ficando, vai para parte inferior.

Gostaria que tudo ficasse dentro da div class="div-texto-producao">

CSS

 

.div-texto-producao{
    width: 630px;
	margin-bottom: 10px;
	height: auto;
	padding: 10px;
	cursor: pointer;
}

 

Está ficando

Citar

Produção ano 2017                                                             
                                                                                                                                 Setor B

 

[_Isis_ 202]

https://jsfiddle.net/bn60suys/

(Faltou você colocar como está o outro texto dentro da div)

[TeixeiraRamos 4]

Olá Isis,

Obrigado pela atenção. Realmente não informei.

Eu tentei assim:

 

<div class="div-texto-producao">
			<h1 align="left" class="titulo-cor-diferente">Produção ano 2017</h1>  
  			<h1 align="Right" class="titulo-cor-diferente>Setor B</h1>
		</div>

Aproveito informar que coloquei na div

display: flex;

Agora ficou na mesma linha, mas juntou o texto:

 

Citar

Produção ano 2017Setor B

 

Esperava:

Produção ano 2017                                                                                                                            Setor B

[Public2004 79]

Utilizando flex:

div {
  display: flex;
  align-items: center;
}
div > div {
  flex: 1;
}

<div>
  <div>Produção ano 2017</div>
  <div>Setor B</div>
</div>

Att

[TeixeiraRamos 4]

Olá Public2004,

Obrigado pela sua atenção.

Estou fazendo alguma bobagem.

 

.div-um {
  display: flex;
  align-items: center;
}
.div-tres > div-dois{
  flex: 1;
}



<div class="div-um" >
	<div class="div-dois">Produção 2017</div>
	<div class="div-tres">Setor B</div>
</div>	
		

Resultado

Citar

Produção 2017Setor B

 

 

[Public2004 79]

.div-um {
  display: flex;
  align-items: center;
}
.div-dois,
.div-tres {
  flex: 1;
}

<div class="div-um" >
  <div class="div-dois">Produção 2017</div>
  <div class="div-tres">Setor B</div>
</div>	

Att

[TeixeiraRamos 4]

Meu Deus! É isso mesmo.

Se eu desejar manter uma maior distância entre:

Citar

Citar

Produção 2017                                                                             Setor B

 

Existe possibilidade?

[Public2004 79]

Claro. Em uma explicação rápida é só lembrar que no exemplo, os elementos contidos dentro da "div-um" (flex) trabalham como se fossem colunas e foi declarado que cada elemento equivale a uma coluna (flex: 1) onde são distribuídas igualmente, no caso, 2 colunas de 50%, uma para cada elemento (div-dois e div-tres) totalizando os 100% da "div-um". Se você quiser espremer o segundo elemento (div-tres) mais para a direita, defina o primeiro elemento (div-dois) com uma quantidade maior de colunas, tipo:

.div-dois {
    flex: 3;
}
.div-tres {
    flex: 1;
}

Em medidas relativas aos 100% da "div-um", ficaria a "div-dois" com 75% e a "div-tres" com 25%.

Flex é bem versátil e tem muitas formas de utilizar, esse é apenas um exemplo.

Att.

[TeixeiraRamos 4]

Vou tentar,

Só desejo colocar mais uma div que fique logo em baixo da div que contem "Produção 2017" e distanciar horizontalmente o texto da div que contem "Setor B".

Ficando:

Produção 2017                                                                                                                                                 Setor B

Aqui vai uma  div com uma texto bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,bla, bla, bla, bla, bla, bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla, bla,bla.  

 

Ainda não me deu o "tique". Você, como sempre, é bem claro nas suas postagens eu é que não estou vendo.

Eu retorno tão logo consiga.

Obrigado.

                                                          

[Public2004 79]

Segue alguns exemplos para o que precisa. Lembrando que para distanciar a "div-tres" com o texto "Setor B" eu já expliquei sobre colunas e distribuição. Se quer ela colada na direita pode fazer assim:

.div-um {
  display: flex;
  flex-flow: wrap;
}
.div-dois {
  margin-right: auto;
}
.div-quatro {
  width: 100%;
}

<div class="div-um" >
  <div class="div-dois">Produção 2017</div>
  <div class="div-tres">Setor B</div>
  <div class="div-quatro">bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.</div>
</div>	

Outra forma:

.div-um {
  display: flex;
  flex-flow: wrap;
}
.div-dois {
  flex: 3;
}
.div-tres {
  flex: 1;
}
.div-quatro {
  width: 100%;
}

<div class="div-um" >
  <div class="div-dois">Produção 2017</div>
  <div class="div-tres">Setor B</div>
  <div class="div-quatro">bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.</div>
</div>	

Para melhor visualizar o resultado em ambos, aplique uma borda, margin e padding nos elementos internos da "div-um".

Att.

 

PS: Caso tenha dificuldade, siga a sugestão da @_Isis_ para o título e simplesmente crie outra div abaixo com o conteúdo.

[TeixeiraRamos 4]

Tentei, mas não consegui. Não sei mesmo o que está acontecendo.

Embora tenha ficado com três coluna, a ultima esperava que ficasse embaixo da div-dois "Produção 2017".

Por favor, observe a CSS:

.div-um {
  display: flex;
  align-items: center;
}

.div-dois, .div-tres {
  flex: 2;
}

.div-quatro {flex: 1;
}

<div class="div-um">
 			<div class="div-dois">Produção 2017</div>
  			<div class="div-tres">Setor B</div>
			<div class="div-quatro">bla,bla,bla,bla,bla,a,bla,blabla,bla,bla,bla,bla,bla</div>
</div> 
			

Focou assim

 

Citar

Produção 2017                              Setor B                                                              bla,bla,bla,bla,bla,a,bla,blabla,bla,bla,bla,bla,bla

 

O bla,bla,bla,bla,bla,a,bla,blabla,bla,bla,bla,bla,bla teria iniciar em baixo do "P" de "Prudução 2017".

E o  "Setor B" no final na mesma direção horizontalmente do "Produção 2017".

 

Vou testar a sugestão da @_Isis e retorno. Desde já agradeço Isis.

Desculpe.

 

 

 

 

 

 

 

 

 

[Public2004 79]

...

[TeixeiraRamos 4]

Os dois funcionam.

Sá tenho que inserir

Citar

height: auto

Devido a div-tres variar o tamanho horizontalmente e a div-quatro, variar o tamanho, também verticalmente.

Valeu mesmo, desculpe a demora, tive que parar diversas vezes, mas não foi falta de interesse.

 

Valeu a aprendizagem. Excelente fórum!!!

 

Eu nunca sei encerrar o tópico.

 

 

[Public2004 79]

Aprendemos junto. No meio da bagunça esqueci de mencionar que a div de conteúdo (div-quatro) precisa definir sua largura para 100%, de resto tá ok, já atualizei também aqui: https://jsfiddle.net/7vvsy7qf/4/

Só para lembrar que Flexbox não rola em versões mais antigas de alguns navegadores e dependendo do seu projeto, a sugestão da colega pode ser melhor opção. Por hoje é só, abs

[TeixeiraRamos 4]

Citar

Aprendemos junto.

É isso mesmo, mas agradeço muito a vocês.

Sucesso sempre!!!

Até a próxima se Deus quiser.