Jump to content
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".

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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>

 

Edited by Giovani
Adicionar a tag code

Share this post


Link to post
Share on other 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>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.