Ir para conteúdo

Arquivado

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

Alvaro Pacífico Serpa

Duas divs lado a lado com uma delas responsiva

Recommended Posts

Para deixar responsivo, você pode usar no lugar de px (pixels), a porcentagem (%). Por exemplo:

div{
width: 20%;
}

 

E com o @media você pode especificar melhor em qual tamanho de tela você quer que isso aconteça. Por exemplo:

 

@media(max-width: 550px){
    div{
        width: 100%;
    }

 

Aqui a largura vai ficar com 100% até a tela chegar a determinada largura que está no "max-width".

Compartilhar este post


Link para o post
Compartilhar em outros sites

pra ficar lado a lado eu prefiro span com display:inline-block no lugar de div. span ficam naturalmente lado a lado

Compartilhar este post


Link para o post
Compartilhar em outros sites
39 minutos atrás, marsolim disse:

pra ficar lado a lado eu prefiro span com display:inline-block no lugar de div. span ficam naturalmente lado a lado

Tipo quando eu abro em tela cheia fica certinho, porem quando diminuo o navegador a div responsiva acaba indo para baixo da div da direita, tentei colocar spam e não deu tbm.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Alvaro estou começando no html estou com esse problema, como seria?

Obrigado

#SPAN{ display:inline-block}

<div id="contents">
   <p>Processo de Compras</p><p id="formata-campo">44101000163201603</p>
  
</div>
<div id="contents">     
            <p>Tipo de Contrato:</p><p id="formata-campo">Cronograma</p>
    
</div>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tenta algo +/- assim

talvez precise de algum ajuste de alinhamento, mas acho que é um caminho

<style>
  .divResp{
  margin-right: 210px;
  border:solid red 1px;
}

.divFixa{
  width: 200px;
  border:solid blue 1px;
  position:absolute;
  right:0px;
  top:0px;
}
</style>

<div class="divResp">DIV1</div>
<div class="divFixa">DIV2</div>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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