3

Minha dúvida é como posicionar a div black abaixo da red quando o navegador for redimensionado?

.teste2 {
    float:right;
    width: 200px;
    height: 100px;
    margin-top: -100px;
    background-color:black;
}

#teste {
    width: 200px;
    height: 100px;
    display: flex;  
    flex-wrap: wrap;
    background-color: red;
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
}
<header id="header" style="width: 100%;">
    <div id="teste"></div>
    <div class="teste2"></div>
</header>

4 Respostas 4

2

Para colocar a div lado a lado e quebrar a linha quando redimensionar use:

 #teste {
     float: left;
     width: 200px;
     height: 100px; 
     background-color: red;
}

.teste2 {
    float: right;
    width: 200px;
    height: 100px;
    background-color:black;
}

Exemplo: https://jsfiddle.net/x6dg89sb/


Para deixá-las alinhadas quando quebrar a linha você pode fazer assim:

<header id="header" style="width: 100%;">
      <div id="teste"></div>
      <div id="divWrapper"></div>
      <div class="teste2"></div>
</header>

#divWrapper {
    height: 100px;
    float: left;
    clear: right;
    /* Standard */
    width: calc(100% - 400px);
    /* Firefox */
    width: -moz-calc(100% - 400px);
    /* WebKit */
    width: -webkit-calc(100% - 400px);
    /* Opera */
    width: -o-calc(100% - 400px);
}

#teste {
     float: left;
     width: 200px;
     height: 100px; 
     background-color: red;
}

.teste2 {
    float: left;
    width: 200px;
    height: 100px;
    background-color: black;
}

Exemplo: https://jsfiddle.net/x6dg89sb/5/

3
  • 1
    Amigo, deu certo apenas modificando o css. Porém a div black não fica alinhada com a div red. Teria como alinha-las?
    – gemerich
    27/03/2017 às 15:35
  • Adicionei outro exemplo na resposta, verifica se é isso que você precisa... 27/03/2017 às 20:05
  • 1
    Tudo certo, grande abraço!
    – gemerich
    29/03/2017 às 13:18
1

Apenas adicione um Media Query, por exemplo, este código vai fazer a div posicionar abaixo quando o tamanho da tela for no máximo de 720px.

@media screen and (max-width: 720px) {
     .teste2, #teste {
         width:100%;
         float:left;
     }
     .teste2 {
         margin-top:0;
     }
 }

Veja em funcionamento clicando aqui

Você pode entender mais o funcionamento do Media Query aqui.

0

Uma solução seria usar media queries, algo do tipo:

@media screen and (min-width:600px) {
   /* Dizer aqui que o tamanho das divs devem ocupar uma largura de 100%, assim uma ficaria em baixo da outra*/

   #teste{
     width: 100%;
   }
   #teste2{
      width: 100%;
   }
}
0

Não sei se é viável para você mas eu gosto de utilizar o Bootstrap nesses casos, agiliza o desenvolvimento e fica mais bonito visualmente na minha opinião, dá uma olhada no Sistema de Grids que você vai entender o que estou falando.

http://getbootstrap.com.br/css/#grid

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .