1

Galera, estou alinhado algumas div como colunas dentro de outra que serve como container. O que eu queria saber é como faço para que em determinada largura da própria div ou da página elas se agrupem uma encima da outra em um fluxo vertical?

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Layout Responsivo</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="container" class="clearfix">
        <div class="header clearfix">
            <div class="logo">
                logo
            </div>
            <div class="menu">
                menu
            </div>
        </div>
        <div class="content clearfix">
            <div class="col" style="background: red;">

            </div>
            <div class="col" style="background: yellow;">

            </div>
            <div class="col" style="background: cyan;">

            </div>
        </div>
    </div>
</body>
</html>

CSS

html, body{
    padding: 0;
    margin: 0;
}

.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}

.clearfix:after {
   clear: both;
}

.clearfix {
   *zoom: 1;
}

.container{
    margin: 0 auto;
    margin-top: 0;
    width: auto;
    height: 900px;

    /*...*/
    background-color: #876;
}

.header{
    width: 100%;
    margin: 0 auto;
    height: auto;
    margin-bottom: 3.6em;
    background-color: #2C82C9;
}

.logo{
    width: 100%;
    height: 160px;

    /*...*/
    background-color: transparent;
}

.menu{
    width: 100%;
    height: 70px;

    /*...*/
    background-color: #456;
}

/*Content*/

.content{

    margin: 0 auto;
    width: 88%;
    height: 400px;

    /*...*/
    background-color: #546;
}

.col{
    width: 33.33333333333333%;
    float: left;
    display: inline;
    height: 300px;
}
5
  • Coloque o código que você já possui, ou as tentativas que você fez que não deu certo. Commented 20/01/2016 às 17:13
  • Quais divs quer alinhar verticalmente? O .header e o .content? Commented 20/01/2016 às 17:20
  • @SamirBraga essas tres com a class=col
    – Mike
    Commented 20/01/2016 às 17:20
  • Agrupar uma em cima da outra, você quer dizer sobrepor as divs? E sobrepor em fluxo vertical? Não entendi muito bem o que você quer... Commented 20/01/2016 às 17:31
  • @GuilhermeLopes sobrepor não. Quero que quando chegar a um determinado tamanho da janela do broswer, por exemplo, elas deixem de está alinhadas e fiquem umas abaixo das outras. Mas o problema já foi resolvido
    – Mike
    Commented 20/01/2016 às 17:37

2 Respostas 2

2

Você pode usar o Media Querie do css:

.container {
  width: 100%;
  height: 1000px;
}

.col {
  display: inline-block;
  background: #333;
  width: 30%;
  height: 300px;
  margin: 2px 0;
}

@media (max-width: 500px) {
  .col {
    display: block;
    width: 100%;
    height: 200px;
  }
}
<div class="container">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Com o max-width você define a largura máxima, quando a largurada página for menor que essa, o que tiver dentro do querie irá ser chamado.

JsFiddle

1
  • 1
    Boa! Muito obrigado pela solução. Até mais
    – Mike
    Commented 20/01/2016 às 17:40
1

você pode usar uma media-query

@media only screen and (max-device-width: 480px) {
    .col{
        width: 100%;
    }
}
1
  • Por algum motivo de magia negra seu estilo não funcionou, msm assim obrigado pela força. abs
    – Mike
    Commented 20/01/2016 às 17:38

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 .